/* FeatherQuest Quest Styles (v3)
   Scoped to .fq-quest so it won't leak into other Elementor content.
*/


.fq-quest{
  max-width: 970px;    
  margin: 0 auto;
  padding: 0;    /* was 2rem 1rem */
  font-size: 1.05rem;
  line-height: 1.7;
  color: #ffffff;
}

/* Headings inside a quest */
.fq-quest h2{
  text-align: center;
  font-size: 1.8rem;
  color: #ffc933;
  margin: 2rem 0 1rem;
}
.fq-quest h3{
  font-size: 1.4rem;
  color: #ffc933;
  margin: 1.5rem 0 1rem;
  text-align: center;
}

/* -----------------------------
   Links (scoped to quests)
------------------------------*/
.fq-quest a,
.fq-quest a:visited{
  color: #7fd7e6;           /* readable “sea-glass” link */
  text-decoration: none;    /* kill the default underline */
  text-underline-offset: 3px;
}

.fq-quest a:hover{
  color: #ffc933;           /* your gold on hover */
  text-decoration: underline;
}

.fq-quest a:focus,
.fq-quest a:focus-visible{
  outline: 2px solid rgba(255, 201, 51, 0.85);
  outline-offset: 3px;
  border-radius: 6px;
}



/* -----------------------------
   Card grid + cards (NEW)
------------------------------*/
.fq-card-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  align-items: stretch;
}

/* Shell only */
.fq-card{
  background: none;
  border: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden; /* clips head/body to one shape */
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* -----------------------------
   Card Head (cinematic strip)
------------------------------*/
.fq-card__head{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: 0.95rem 1.1rem;

  border: 2px solid rgba(255,255,255,0.25);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;

  background: rgba(0,0,0,0.40); /* slightly lighter than 0.45 */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

/* use this for emoji in the header */
.fq-card__icon{
  font-size: 1.6rem;
  line-height: 1;
  transform: translateY(1px);
}

/* Title inside the header strip */
.fq-card__title{
  color: #ffc933;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin: 0;
}

/* -----------------------------
   Card Body (translucent panel)
------------------------------*/
.fq-card__body{
  padding: 1.1rem 1.25rem 1.25rem;

  border: 2px solid rgba(255,255,255,0.25);
  border-top: 0;
  border-radius: 0 0 18px 18px;

  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  flex: 1 1 auto;
  overflow: auto;         /* or hidden if you never want scroll */
  max-height: 400px;      /* optional safety for wild content */
}


@media (max-width: 555px){
  .fq-card{
    height: auto;
  }

  .fq-card__body{
    overflow: visible;   /* no internal scroll */
    max-height: none;
  }
}

/* Label/value used inside body */
.fq-card__label{
  font-weight: 700;
  color: #ffc933;
  font-size: 1.1rem;
  margin: 0.25rem 0 0.35rem;
}

.fq-card__value{
  font-size: 3rem;
  font-weight: 800;
  margin: 0.25rem 0 0.65rem;
  line-height: 1.1;
  font-style: normal;
  text-size-adjust: 100%;
  font-family: Lato, sans-serif;
}

/* Lists inside body (lifers, eBird, TOC, etc.) */
.fq-card__body ul{
  margin: 0.6rem 0 0;
  padding-left: 20px;
  text-align: left;
}
.fq-card__body li{
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  line-height: 1.45;
}

/* Old emoji style (if any cards still use it in body) */
.fq-card__emoji{
  font-size: 1.5rem;
  display: inline-block;
  line-height: 1;
}

/* Lists inside cards (lifers, eBird, TOC, etc.) */
.fq-card ul{
  margin: 10px 0 0 0;
  padding-left: 20px;
  text-align: left;
}
.fq-card li{
  margin-bottom: 4px;
  font-size: 1rem;
  line-height: 1.4;
}

/* Base card wrapper (no background here — head/body own the visuals) */
.fq-card{
  border: 0;
  padding: 0;
  overflow: hidden; /* ensures rounded corners clip nicely */
}

/* HEADER STRIP */
.fq-card__head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  padding: 0.95rem 1.1rem;

  border: 2px solid rgba(255,255,255,0.25);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;

  background: rgba(0,0,0,0.45); /* cinematic dark */
  /* optional: subtle depth */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.fq-card__icon{
  font-size: 1.6rem;  /* make emoji “badge” sized */
  line-height: 1;
  transform: translateY(1px);
}

.fq-card__title{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  /* keep your gold color if you already set it globally */
}



/* If you want the body’s lists to breathe consistently */
.fq-card__body ul{
  margin: 0.6rem 0 0;
  padding-left: 20px;
}
.fq-card__body li{
  margin: 0 0 0.5rem 0;
  line-height: 1.45;
}

/* Highlights card keeps your “story note card” feel */
.fq-highlights-list{
  text-align: left;
  margin: 1rem auto;
}
.fq-highlights-list ul{ list-style-type: disc; }
.fq-highlights-list li{ margin-bottom: 0.5rem; }

/* -----------------------------
   Sections (story blocks)
------------------------------*/
.fq-section{
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  margin: 3rem auto 1rem auto;
  padding: 2rem;
  text-align: center;
}

.fq-section__title{
  margin: 0 0 0.75rem 0;
}

.fq-section__subtitle{
  display: block;
  margin: 0 0 1.5rem 0;
  opacity: 0.9;
}

/* Section body is the readable column */
.fq-section__body{
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}

.fq-section__body p{
  line-height: 1.65;
  margin: 0 0 1.25em 0;
}

/* Gallery sections: cinematic, less boxed-in */
.fq-section--gallery{
  background: transparent;
  border: none;
  padding: 1rem 0;
}

/* -----------------------------
   Inline figures inside sections
------------------------------*/
.fq-section__body figure{
  margin: 2rem auto 2.25rem auto;
}
.fq-section__body figure a{
  display: flex;
  justify-content: center;  /* centers width:auto portraits */
  width: 100%;
}
.fq-section__body figure img{
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  max-height: 640px;
  object-fit: contain;
}
.fq-section__body figcaption{
  margin-top: 0.75rem;
  text-align: center;
  width: 100%;
  line-height: 1.15; /* helps the stack feel intentional */
}

.fq-section__body figcaption span{
  display: block;
}

/* Title */
.fq-section__body figcaption span:first-child{
  font-style: italic;
  font-size: 1.15rem;
  margin-bottom: 0.15rem; /* tighter than 0.25 */
  line-height: 1.1;
}

/* Subtitle */
.fq-section__body figcaption span:nth-child(2){
  font-size: 0.95rem;
  opacity: 0.8;
  line-height: 1.2;
  margin-top: 0; /* keep it snug */
}


/* Caption → next paragraph spacing */
.fq-section__body figure + p{
  margin-top: 1.5rem;
}

@media (max-width: 780px){
  .fq-section{ padding: 1.5rem 1.25rem; }
  .fq-section__body figure{ margin: 1.25rem auto 1.75rem auto; }
  .fq-section__body figure img{ max-height: 520px; }
  .fq-section__body figcaption span:first-child{ font-size: 1.05rem; }
}

/* -----------------------------
   Gallery
------------------------------*/

.fq-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(312px, 1fr));
  gap: 16px;
  margin-top: 1.25rem;
}
/* Gallery sections: cinematic, less boxed-in */
.fq-section--gallery{
  background: transparent;
  border: none;
  padding: 1rem 0;
}

.fq-gallery__item{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0px;
  margin: 0px;
}

.fq-gallery__item a{
  flex-grow: 1;
  display: block;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.fq-gallery__item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 12px 12px 0 0;
}

.fq-gallery__caption{
  background: rgba(0, 0, 0, 0.40);
  text-align: center;
  padding: 0.5rem;
  font-size: 0.95rem;
  color: #ffc933;
  border-radius: 0 0 10px 10px;
}

.fq-gallery__caption span{
  display: block;
}
.fq-gallery__caption span:first-child{
  font-style: italic;
}
.fq-gallery__caption span:nth-child(2){
  font-size: 0.85em;
  font-style: italic;
  color: #ccc;
  margin-top: 2px;
}

/* -----------------------------
   Hero (kept compatible with your existing look)
------------------------------*/
.fq-hero{
  position: relative;
  width: 100vw;
  margin: 0 calc(50% - 50vw) 32px;
}

.fq-hero-media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
  overflow: hidden;
}

.fq-hero-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.fq-hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.80) 0%,
    rgba(0, 0, 0, 0.05) 45%,
    rgba(0, 0, 0, 0.0) 75%
  );
  color: #ffffff;
}

.fq-hero-panel{
  pointer-events: auto;
  width: 100%;
  margin-top: auto;
  padding: 18px 6vw 22px;
  background: rgba(0, 0, 0, 0.62);
  text-align: center;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

.fq-hero__title{
  margin: 0 0 10px 0;
  line-height: 1.08;
  
  font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2.3rem) !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}

.fq-hero__subtitle{
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.95;
}

/* Mobile hero: turn overlay into a title bar under the image */
@media (max-width: 720px){

  /* Ensure the hero stacks naturally */
  .fq-hero{
    display: flex;
    flex-direction: column;
  }

  /* Image first */
  .fq-hero-media{
    order: 1;
  }

  /* Overlay becomes a normal block below the image */
  .fq-hero-overlay{
    order: 2;

    position: static !important;
    inset: auto !important;

    display: block;
    width: 100%;

    /* “Title bar” look */
    background: rgba(0,0,0,0.45) !important;
    padding: 14px 16px;
  }

  /* Remove any desktop centering constraints */
  .fq-hero-panel{
    max-width: none;
    margin: 0;
    text-align: center;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    backdrop-filter: none !important;
  }
  /* if you have an overlay gradient/pseudo-element, kill it too */
  .fq-hero-overlay::before,
  .fq-hero-overlay::after,
  .fq-hero-panel::before,
  .fq-hero-panel::after{
    content: none !important;
    display: none !important;
  }

  /* Tune text for mobile */
  .fq-hero__title{
    margin: 0;
    line-height: 1.05;
    font-size: clamp(1.8rem, 6vw, 2.4rem);
  }

  .fq-hero__subtitle{
    margin: 8px 0 0 0;
    line-height: 1.35;
    font-size: 1rem;
  }
}

/* Locations card */
.fq-card--locations .fq-locations{
  margin-top: 0.75rem;
  text-align: center; /* matches your card vibe; change to left if desired */
}

.fq-location{
  margin-top: 1rem; /* spacing between locations */
}

.fq-location:first-child{
  margin-top: 0;
}

.fq-location__name{
  display: inline-block;
  text-decoration: none;
}

.fq-location__habitat{
  margin-top: 0.35rem;
  font-style: italic;
  opacity: 0.95;
}

.fq-location__habitat-label{
  font-style: italic; /* keep label consistent */
  font-weight: 600;   /* optional: makes “Habitat:” read a touch clearer */
}