/* ==========================================================================
   Pattern: Testimonials V1  (patterns/testimonials-v1.php)

   A full-bleed section laid out as one grid. The heading and the two arrows
   share the first row, the card track runs past the right edge so the next
   card peeks in, and the dots sit centred underneath.

   The arrows and the dots arrive in the markup as siblings inside the slider's
   own .forge-slider__controls, which the block renders after the viewport.
   Getting one above the track and the other below means their positions have to
   be decided by this grid rather than by that wrapper, so .forge-slider adopts
   the section's tracks as a subgrid and the wrapper itself is flattened with
   display: contents.

   The root must keep a box: the block defers Embla setup to an
   IntersectionObserver watching .forge-slider, and display: contents there
   leaves nothing to intersect, so the slider silently never initialises. No
   dots, no working arrows, no drag. Subgrid buys the same layout reach while
   the element stays observable. The wrapper below it is safe to flatten because
   nothing observes or measures it.
   ========================================================================== */

.forge-testimonials-v1 {
    /* Half the space left over beside the content column on a wide screen, the
       plain gutter on a narrow one. Consumed as a grid track so the percentage
       resolves against the section once, rather than against whichever item
       would otherwise carry it as padding. */
    --gutter: max(
        var(--wp--preset--spacing--sm),
        calc((100% - var(--wp--style--global--content-size)) / 2)
    );

    display: grid;
    grid-template-columns: var(--gutter) minmax(0, 1fr) auto auto var(--gutter);
    grid-template-rows: auto auto auto;

    /* No row-gap. The two vertical steps in this section are stated on the
       elements that own them instead, the heading's bottom margin and the dots'
       top margin, so each can be tuned on its own. */
    row-gap: 0;
}

.forge-testimonials-v1__head {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    /* Two lines, as drawn. The column is the full content width, so without a
       cap the heading runs out as one long line beside the arrows. */
    max-width: 26rem;
}

/* Scoped to the head, because the name on every card is a .wp-block-heading
   too. */
.forge-testimonials-v1__head .wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--xl);
}

/* --- Promoting the slider's parts into the section grid -------------------- */

/* Covers every cell and hands its own children the section's tracks. */
.forge-testimonials-v1 .forge-slider {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-items: center;

    /* Spanning every row means this box also sits on top of the heading, and it
       comes after it in the markup, so it would otherwise swallow every click
       and drag-select aimed at the heading. The box is only ever a layout
       container; the parts that need the pointer take it back below. */
    pointer-events: none;
}

.forge-testimonials-v1 .forge-slider__viewport,
.forge-testimonials-v1 .forge-slider__arrow,
.forge-testimonials-v1 .forge-slider__dots {
    pointer-events: auto;
}

.forge-testimonials-v1 .forge-slider__controls {
    display: contents;
}

/* Starts on the content column and runs through the right-hand gutter to the
   screen edge. That overhang is what makes the next card peek. */
.forge-testimonials-v1 .forge-slider__viewport {
    grid-column: 2 / -1;
    grid-row: 2;
}

.forge-testimonials-v1 .forge-slider__arrow--prev {
    grid-column: 3;
    grid-row: 1;
}

.forge-testimonials-v1 .forge-slider__arrow--next {
    grid-column: 4;
    grid-row: 1;
    margin-left: var(--wp--preset--spacing--2-xs);
}

/* Centred on the whole section rather than on the content column: the track is
   off-centre but the dots are not. */
.forge-testimonials-v1 .forge-slider__dots {
    grid-column: 1 / -1;
    grid-row: 3;
    justify-self: center;
    margin-top: var(--wp--preset--spacing--xl);
}

/* --- Slider chrome --------------------------------------------------------- */

/* The block is fully tokenised, so this is configuration rather than overriding
   its rules. The tokens are declared on .forge-slider itself, so they have to
   be set on that element or lower; set on the section they would lose to the
   block's own declaration. */
.forge-testimonials-v1 .forge-slider {
    --forge-slider-arrow-size: 44px;
    --forge-slider-arrow-radius: 50%;
    --forge-slider-dot-size: 10px;
    --forge-slider-dot-gap: 8px;
    --forge-slider-dot-color: var(--wp--preset--color--background-alt);
    --forge-slider-dot-active-color: var(--wp--preset--color--secondary);

    /* The block writes this same property inline from its gap attribute, which
       is why it needs !important: a page holding a copy of the pattern saved
       with a different value would otherwise keep it. */
    --forge-slider-gap: 16px !important;
}

/* Both arrows carry one resting treatment, white face with a navy outline and
   glyph, and fill on hover. The block's own dimming of a disabled arrow is left
   alone, so an end of the track still reads as one, and :not(:disabled) keeps
   the fill off an arrow that would not do anything. */
.forge-testimonials-v1 .forge-slider__arrow {
    --forge-slider-arrow-bg: var(--wp--preset--color--background);
    --forge-slider-arrow-color: var(--wp--preset--color--primary);
    --forge-slider-arrow-border: 1px solid var(--wp--preset--color--primary);
}

.forge-testimonials-v1 .forge-slider__arrow:hover:not(:disabled) {
    --forge-slider-arrow-bg: var(--wp--preset--color--secondary);
    --forge-slider-arrow-color: var(--wp--preset--color--background);
    --forge-slider-arrow-border: 1px solid var(--wp--preset--color--secondary);
}

/* The block ships a chevron; the rest of the site draws a long arrow. Masked
   from currentColor so the colour tokens above still drive the glyph, including
   on hover and when disabled. */
.forge-testimonials-v1 .forge-slider__arrow svg {
    display: none;
}

.forge-testimonials-v1 .forge-slider__arrow::before {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--forge-testimonials-v1-arrow) center / contain no-repeat;
    mask: var(--forge-testimonials-v1-arrow) center / contain no-repeat;
}

.forge-testimonials-v1 .forge-slider__arrow--prev {
    --forge-testimonials-v1-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M34.34,122.34l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216a8,8,0,0,1,0,16H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72A8,8,0,0,1,34.34,122.34Z'/%3E%3C/svg%3E");
}

.forge-testimonials-v1 .forge-slider__arrow--next {
    --forge-testimonials-v1-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E");
}

/* --- Cards ----------------------------------------------------------------- */

/* Every card matches the tallest in view. The slide is the flex item Embla
   sizes, so the stretch has to start there and be passed down: a percentage
   height would need a definite parent height the slide never has. */
.forge-testimonials-v1 .forge-slider__slide {
    display: flex;

    /* Without this, dragging the track highlights the quote instead of moving
       it: the pointer is over text, so the browser starts a selection and the
       swipe reads as broken. Nothing in the slider guards against it, so every
       forge slider carrying text has to say so itself. */
    user-select: none;
    -webkit-user-select: none;
}

/* The tint and the padding live here rather than on the block, because a
   pattern is copied into a page when it is inserted: a page holding an older
   copy keeps whatever the block attributes said that day, and no edit to the
   pattern file will reach it. Stated in CSS, both old and new placements pick
   it up. */
.forge-testimonials-v1__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: var(--wp--preset--spacing--lg);
    background-color: var(--wp--preset--color--background-light);
    border-radius: 16px;
}

.forge-testimonials-v1__card::before {
    content: "";
    width: 2.188rem;
    height: 2.188rem;
    margin-bottom: var(--wp--preset--spacing--sm);
    background-image: url("../../decorations/quote-icon.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

/* The quotation marks belong to the presentation, not the copy, so editors are
   not asked to type them into every excerpt. */
.forge-testimonials-v1__quote {
    quotes: "\201C" "\201D";
    line-height: var(--wp--custom--line-height--relaxed);
    /* A fixed step to the name, so it sits the same distance under the quote in
       every card. Cards still stretch to the tallest in view, so a short quote
       leaves space at the foot of its card rather than pushing the name down to
       line up with its neighbours. */
    margin-bottom: var(--wp--preset--spacing--lg) !important;
}

.forge-testimonials-v1__quote::before {
    content: open-quote;
}

.forge-testimonials-v1__quote::after {
    content: close-quote;
}

.forge-testimonials-v1__name {
    font-weight: var(--wp--custom--font-weight--semibold);
    letter-spacing: -0.01em;
}

/* Role and company on one line, separated by a dot drawn here. Either can be
   empty, so the separator belongs to the company and disappears with it. */
.forge-testimonials-v1__meta {
    gap: 0;
    margin-top: var(--wp--preset--spacing--2-xs);
}

.forge-testimonials-v1__role:empty,
.forge-testimonials-v1__company:empty {
    display: none;
}

.forge-testimonials-v1__role:not(:empty) + .forge-testimonials-v1__company:not(:empty)::before {
    content: "\00B7";
    margin: 0 0.4rem;
}

/* --- Narrow screens -------------------------------------------------------- */

/* One card at a time, and the arrows step aside: at this width they would crowd
   a heading that already wraps, and the dots plus drag are enough. */
@media (max-width: 767.98px) {
    .forge-testimonials-v1 {
        grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
    }

    .forge-testimonials-v1 .forge-slider__arrow {
        display: none;
    }

    .forge-testimonials-v1__head {
        max-width: none;
    }

    .forge-testimonials-v1__card {
        padding: var(--wp--preset--spacing--md);
    }
}