/* ============================================================
   TESTIMONIAL CARDS
   ============================================================
   The card, and the full-quote modal "Read more" opens. Moved out of
   home.css when testimonials became their own post type: the same card now
   renders on the homepage carousel and anywhere the [fc_testimonials]
   shortcode is used, and home.css is a whole-page stylesheet that cannot be
   loaded on those other pages.

   The cards are light-on-dark, so whatever section holds them has to supply a
   dark background. On the homepage that is .testi-section (still in
   home.css); for the shortcode it is .fc-testimonials-block at the bottom of
   this file. Anything carousel-specific (track, nav arrows, entrance
   animation) also stays in home.css.
   ============================================================ */

  /* Fixed height + clamped quote so every card in the row reads the same
     height regardless of quote length; the author row is pinned to the
     bottom via margin-top: auto instead of just trailing the text. Card
     height never changes on expand — the quote area scrolls internally
     instead, so the card/background never grows past its footprint. */
  .testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 360px;
    flex: 0 0 400px;
    scroll-snap-align: start;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 18px;
    padding: 38px 32px;
    backdrop-filter: blur(8px);
    transition: background-color 0.45s ease,
                border-color 0.45s ease,
                box-shadow 0.45s ease;
  }
  /* The card is already glass — translucent, blurred, sitting over a photo —
     so hover lights its *edge* rather than recolouring it: the pane catches a
     light source that travels around the frame.

     The travelling highlight is a conic-gradient masked down to just the 1px
     frame (mask-composite cuts the middle out, leaving a ring), rotated by
     animating --fc-glass-angle. The angle is registered with @property so the
     browser interpolates it as an angle; without that registration a custom
     property is only ever a string and the gradient would jump between
     keyframes rather than sweep. Where @property is unsupported the ring still
     renders and still fades in on hover, it just doesn't rotate.

     Two passes of light, half a turn apart, so an edge is lit roughly twice
     per revolution the way a real pane catches a source as it moves. The green
     in the second stop keeps the reflection on-brand instead of a flat white
     glint. */
  @property --fc-glass-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }
  .testimonial::before,
  .testimonial::after {
    content: "";
    position: absolute;
    /* -1px, not 0: an absolutely positioned child is laid out against the
       padding box, so the ring would otherwise sit inside the existing border
       instead of on top of it. */
    inset: -1px;
    /* Card radius + the 1px the ring sits outside it, so the ring follows
       the card's rounded corners rather than cutting across them. */
    border-radius: 19px;
    pointer-events: none;
    opacity: 0;
    background: conic-gradient(
      from var(--fc-glass-angle),
      rgba(255,255,255,0) 0turn,
      rgba(255,255,255,0.06) 0.02turn,
      rgba(255,255,255,0.5) 0.06turn,
      rgba(196,232,120,0.34) 0.085turn,
      rgba(255,255,255,0.06) 0.13turn,
      rgba(255,255,255,0) 0.2turn,
      rgba(255,255,255,0) 0.5turn,
      rgba(255,255,255,0.05) 0.53turn,
      rgba(255,255,255,0.26) 0.57turn,
      rgba(255,255,255,0.05) 0.62turn,
      rgba(255,255,255,0) 0.68turn,
      rgba(255,255,255,0) 1turn
    );
    /* Cut the middle out so only the frame is painted: two full-size masks,
       one clipped to the content box, combined with xor. */
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite: exclude;
    transition: opacity 0.5s ease;
  }
  /* Bloom: the same travelling light, thicker and blurred, sitting under the
     crisp edge. A real highlight on glass bleeds either side of the edge, and
     a single hairline just reads as a colour change against the photo. */
  .testimonial::before {
    z-index: 1;
    padding: 2px;
    filter: blur(6px);
  }
  /* The crisp specular edge itself. */
  .testimonial::after {
    z-index: 2;
    padding: 1px;
  }
  .testimonial:hover,
  .testimonial:focus-within {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.17);
    /* Soft outer shadow + a faint inner top edge, so the pane reads as lit
       from outside rather than just outlined. */
    box-shadow: 0 16px 36px rgba(0,0,0,0.2),
                inset 0 1px 0 rgba(255,255,255,0.09);
  }
  /* Deliberately restrained: this is a hover accent on a card sitting over a
     busy photograph, so the light should be something you notice a beat after
     the pointer lands, not a lit outline. The sweep is slow for the same
     reason — a fast pass reads as a UI animation, a slow one as a reflection. */
  .testimonial:hover::after,
  .testimonial:focus-within::after { opacity: 0.6; }
  .testimonial:hover::before,
  .testimonial:focus-within::before { opacity: 0.4; }
  @media (prefers-reduced-motion: no-preference) {
    .testimonial:hover::before,
    .testimonial:hover::after,
    .testimonial:focus-within::before,
    .testimonial:focus-within::after {
      animation: fc-glass-sweep 7s linear infinite;
    }
  }
  @keyframes fc-glass-sweep {
    to { --fc-glass-angle: 1turn; }
  }
  /* Quote mark in the accent face (Inter Tight 700, which the Google Fonts
     request loads) rather than the serif the quote itself is set in, so the
     mark reads as a graphic rather than part of the sentence. */
  .quote-mark {
    font-family: var(--font-accent);
    font-weight: 700;
    font-size: 64px;
    color: #fff;
    line-height: 0.5;
    margin-bottom: 16px;
    height: 30px;
  }
  .testi-text-wrap { overflow: hidden; }
  .testi-text {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 1.5;
    color: rgba(255,255,255,0.95);
    font-style: italic;
    font-weight: 400;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .testi-more {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 8px;
    appearance: none;
    -webkit-appearance: none;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 10px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: #fff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .testi-more:hover, .testi-more:focus {
    background: none !important;
    color: #fff !important;
  }
  .testi-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,0.15);
  }
  .avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--green);
    color: var(--green, #4a7c3a);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar svg { width: 22px; height: 22px; }
  .testi-author .name {
    font-weight: 600;
    font-size: 14px;
    color: #fff;
  }
  .testi-author .role {
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Full-testimonial modal — opened from "Read more". Sized to its content
     (no max-height/scroll), backdrop blurred, panel fades + scales in. */
  .testi-modal {
    position: fixed;
    inset: 0;
    /* High enough to clear every other overlay on the page (mobile menu is
       9999, the datepicker is 99999) so the modal is never trapped behind
       something with its own stacking context. */
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
  }
  .testi-modal[hidden] { display: none; }
  .testi-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,20,12,0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .testi-modal.is-open .testi-modal__backdrop { opacity: 1; }
  .testi-modal__panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    color: var(--ink, #1f2419);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,0.35);
    padding: 52px 44px 44px;
    opacity: 0;
    transform: scale(0.96) translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .testi-modal.is-open .testi-modal__panel {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  /* The modal panel is white, so the mark flips to ink there. */
  .testi-modal .quote-mark { color: var(--ink, #1f2419); }
  /* Same black circle + white icon as .amenity-card__toggle / .loc-popup-close,
     so every dismiss control on the site reads as the same control. */
  .testi-modal__close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 2;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 0 !important;
    background: #000 !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  .testi-modal__close:hover { background: #222 !important; }
  .testi-modal__close svg { width: 16px !important; height: 16px !important; stroke: #fff !important; }
  .testi-modal__text {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink, #1f2419);
    font-style: italic;
    font-weight: 400;
    margin-bottom: 26px;
  }
  .testi-modal .testi-author {
    margin-top: 0;
    border-top-color: rgba(0,0,0,0.1);
  }
  .testi-modal .avatar {
    border-color: rgba(0,0,0,0.15);
    color: var(--ink, #1f2419);
  }
  .testi-modal .testi-author .name { color: var(--ink, #1f2419); }
  .testi-modal .testi-author .role { color: rgba(0,0,0,0.55); }

  /* ============ [fc_testimonials] BLOCK ============
     The section the shortcode renders on pages other than the homepage. It
     carries the dark ground the cards need, and restates the font tokens the
     card rules read, since those are declared in home.css's :root and home.css
     is not loaded here. Colors come from style.css :root. The homepage is
     unaffected because these are scoped to the shortcode's own wrapper. */
  .fc-testimonials-block {
    --font-display: 'proxima-sera', Georgia, 'Times New Roman', serif;
    --font-accent:  'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'proxima-nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    background: var(--ink);
    color: #fff;
    padding: 90px 40px;
  }
  .fc-testimonials-block__head {
    max-width: 1280px;
    margin: 0 auto 46px;
    text-align: center;
  }
  .fc-testimonials-block__head h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 4.4vw, 54px);
    line-height: 1em;
    color: #fff;
    margin: 0 0 14px;
  }
  .fc-testimonials-block__head h2 b,
  .fc-testimonials-block__head h2 em {
    font-family: var(--font-accent);
    font-weight: 400;
    font-style: normal;
    font-size: 0.94em;
    color: var(--green, #4a7c3a);
  }
  .fc-testimonials-block__head p {
    font-family: var(--font-body);
    max-width: 640px;
    margin: 0 auto;
    color: rgba(255,255,255,0.8);
  }
  /* Cards are fixed-width in the homepage carousel; in this grid they stretch
     to the column instead, so a two or three across layout has no gaps. */
  .fc-testimonials-block__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    max-width: 1280px;
    margin: 0 auto;
  }
  .fc-testimonials-block__grid .testimonial { flex: 1 1 auto; }

  @media (max-width: 900px) {
    .fc-testimonials-block { padding: 64px 22px; }
  }
  @media (max-width: 640px) {
    .fc-testimonials-block__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 921px) {
    /* The sticky mobile header sits on top of the viewport at a fixed
       height (--fc-mobile-header-h, set by mobile-menu.js); centering the
       modal on the full viewport let it start underneath that header. */
    .testi-modal {
      align-items: flex-start;
      padding: calc(var(--fc-mobile-header-h, 60px) + 16px) 24px 24px;
    }
    .testi-modal__panel {
      max-height: calc(100vh - var(--fc-mobile-header-h, 60px) - 32px);
    }
  }
  @media (max-width: 480px) {
    .testi-modal { padding: calc(var(--fc-mobile-header-h, 60px) + 12px) 16px 16px; }
    .testi-modal__panel { max-height: calc(100vh - var(--fc-mobile-header-h, 60px) - 24px); padding: 44px 24px 28px; }
    .testi-modal__text { font-size: 17px; }
  }