/**
 * Coemans Starter - builder block styles
 *
 * Styles for every flexible-content block in template-parts/builder/*.
 * The builder (template-parts/builder.php) can render on ANY template
 * (front-page.php, page.php, ...), so this file is enqueued globally in
 * functions.php - it must NOT be gated to the front page like home.css.
 *
 * Depends on the design tokens defined in main.css.
 */

/* ---------------------------------------------------------------------------
   Section rhythm: each block pads its own top AND bottom, so two stacked
   blocks would double the gap at the seam. When the two neighbours share a
   background (e.g. a white text block above the white gallery) that reads as
   too much empty space - so drop the following block's top padding, leaving a
   single section's worth. Cross-colour seams (white->dark, white->grey) keep
   both paddings, because the colour change makes that spacing look intended.
   NB: when you add a new white/dark block, add its selector to the lists below.
   --------------------------------------------------------------------------- */
:is(.twi--white, .fwt--white, .special-menu, .gallery-section, .form-section, .suggesties-carousel--white)
  + :is(.twi--white, .fwt--white, .special-menu, .gallery-section, .form-section, .suggesties-carousel--white),
:is(.twi--dark, .fwt--dark, .suggesties-carousel--dark)
  + :is(.twi--dark, .fwt--dark, .suggesties-carousel--dark) {
    padding-top: 0;
}

/* =========================================================================
   Builder section: Text with image
   ========================================================================= */
.twi {
    padding-block: var(--space-12);
}

.twi--dark {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.twi--white {
    background: var(--color-bg);
    color: var(--color-text-dark);
}

.twi__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
    align-items: center;
}

.twi--media-right .twi__media {
    order: 2;
}

.twi__media {
    position: relative;
}

.twi__image {
    margin: 0;
}

.twi__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Two-image variant: secondary image overlaps the primary at bottom-right */
.twi--two-image .twi__media {
    padding-right: 15%;
    padding-bottom: 18%;
}

.twi--two-image .twi__image--secondary {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
}

.twi__content {
    max-width: 480px;
    margin: auto;
}

.twi__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.twi--dark .twi__title {
    color: var(--color-accent-light);
}

.twi--white .twi__title {
    color: var(--color-accent-dark);
}

.twi__text {
    margin-bottom: var(--space-6);
    line-height: var(--lh-normal);
}

.twi__text > *:last-child {
    margin-bottom: 0;
}

.twi__button {
    margin-top: var(--space-2);
}

@media (max-width: 1023px) {
    .twi {
        padding-block: var(--space-10);
    }

    .twi__inner {
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .twi {
        padding-block: var(--space-8);
    }

    .twi__inner {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    /* On mobile, media always sits above the text regardless of position */
    .twi--media-right .twi__media,
    .twi--media-left .twi__media {
        order: 0;
    }

    .twi--two-image .twi__media {
        padding-right: 12%;
        padding-bottom: 22%;
    }

    .twi__content {
        max-width: none;
    }
}

/* ---------------------------------------------------------------------------
   Builder section: Reviews
   --------------------------------------------------------------------------- */
.reviews-section {
    position: relative;
    background-color: var(--color-bg-alt);
    padding-block: var(--space-12);
    overflow: hidden;
}

/* Decorative twirl - animated drift + gentle breath */
.reviews-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 1168px;
    height: 316px;
    background: url('../img/reviews-twirl.svg') no-repeat 0 0;
    pointer-events: none;
    z-index: 0;
    transform-origin: 30% 30%;
    animation: reviews-twirl-drift 16s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes reviews-twirl-drift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translate(24px, -10px) scale(1.025);
        opacity: 0.82;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reviews-section::before {
        animation: none;
    }
}

.reviews-section__inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.reviews-section__title {
    color: var(--color-primary);
    margin: 0 0 var(--space-8);
    font-size: var(--fs-h2);
}

.reviews-section__widget {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   Builder section: Image (full-width, parallax)
   --------------------------------------------------------------------------- */
.image-section {
    position: relative;
    width: 100%;
    height: 630px;
    max-height: 630px;
    overflow: hidden;
}

.image-section__img {
    position: absolute;
    /* Image overshoots top and bottom so parallax translation
       (~±12% via main.js) never reveals the section edges. */
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    object-fit: cover;
    will-change: transform;
}

@media (max-width: 767px) {
    .image-section {
        height: 360px;
    }
}

/* ---------------------------------------------------------------------------
   Builder section: Special menu - centered list with dividers, price, info
   --------------------------------------------------------------------------- */
.special-menu {
    background: var(--color-bg);
    padding-block: var(--space-12);
}

.special-menu__inner {
    text-align: center;
}

.special-menu__list {
    list-style: none;
    margin: 0 auto var(--space-8);
    padding: 0;
    max-width: 720px;
}

.special-menu__item {
    position: relative;
    padding-block: var(--space-5);
    color: var(--color-text-dark);
    font-size: 1.5rem; /* 24px */
    line-height: 1.4;
}

/* Divider sits exactly at the boundary between items, so the gap
   above and below it (each = item padding-block) is symmetric. */
.special-menu__item + .special-menu__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 108px;
    height: 1px;
    background: var(--color-border);
}

.special-menu__price {
    margin: 0 0 var(--space-3);
    color: var(--color-text-dark);
    font-size: var(--fs-body);
}

.special-menu__info, p.special-menu__price {
    margin: 0 auto;
    max-width: 640px;
    color: var(--color-text-muted);
    font-size: 17px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   Builder section: Gallery - 4-up image grid, each thumb opens in the lightbox
   --------------------------------------------------------------------------- */
.gallery-section {
    padding-block: var(--space-12);
}

.gallery-section__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.gallery-section__item {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.gallery-section__link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
    line-height: 0;
}

.gallery-section__link:hover {
    text-decoration: none;
}

.gallery-section__link:focus-visible {
    outline: 2px solid var(--color-accent-dark);
    outline-offset: 2px;
}

.gallery-section__link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-base);
}

.gallery-section__link:hover img,
.gallery-section__link:focus-visible img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-section__link img {
        transition: none;
    }

    .gallery-section__link:hover img,
    .gallery-section__link:focus-visible img {
        transform: none;
    }
}

@media (max-width: 767px) {
    .gallery-section__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   Builder section: Full-width text - centered title/text/button, max 800px
   --------------------------------------------------------------------------- */
.fwt {
    padding-block: var(--space-12);
}

.fwt--dark {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.fwt--white {
    background: var(--color-bg);
    color: var(--color-text-dark);
}

.fwt__inner {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--container-pad);
    text-align: center;
}

.fwt__title {
    margin: 0 0 var(--space-5);
    font-family: var(--font-heading);
    font-size: var(--fs-h2);
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.fwt--dark .fwt__title {
    color: var(--color-accent-light);
}

.fwt--white .fwt__title {
    color: var(--color-accent-dark);
}

.fwt__text {
    margin-bottom: var(--space-6);
    line-height: var(--lh-normal);
}

.fwt__text > *:last-child {
    margin-bottom: 0;
}

.fwt__button {
    margin-top: var(--space-2);
}

@media (max-width: 1023px) {
    .fwt {
        padding-block: var(--space-10);
    }
}

@media (max-width: 767px) {
    .fwt {
        padding-block: var(--space-8);
    }
}

/* ---------------------------------------------------------------------------
   Builder section: Form - centered heading + a Gravity Form (chosen in the
   editor). GF field styling (labels, submit button, footer) is shared with
   the contact page via the :is(.contact-form, .form-section) rules in
   main.css; global input/select/textarea styling lives in main.css too.
   --------------------------------------------------------------------------- */
.form-section {
    padding-block: var(--space-12);
}

.form-section__inner {
    max-width: 720px;
}

.form-section__title {
    margin: 0 0 var(--space-8);
    color: var(--color-primary);
    font-size: var(--fs-h2-sm);
    text-align: center;
}

@media (max-width: 1023px) {
    .form-section {
        padding-block: var(--space-10);
    }
}

@media (max-width: 767px) {
    .form-section {
        padding-block: var(--space-8);
    }
}

/* ---------------------------------------------------------------------------
   Shared menu components - image slider + Regular-menu group/row list.
   Used by the Menu page sections (template-parts/menu/*) and the builder
   Suggesties block, so they load on every page from here. Slider behaviour:
   main.js [data-menu-slider].
   --------------------------------------------------------------------------- */
.menu-media__single {
    margin: 0;
}

.menu-media__single img,
.menu-slider__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    /* Cap the gallery height; on wide columns the 4:5 ratio is clamped to this
       and object-fit crops to a landscape view (per design). */
    max-height: 440px;
    object-fit: cover;
}

/* Image slider (2+ images). JS adds .is-enhanced; without it the slides fall
   back to a horizontally scrollable, snapping strip. */
.menu-slider {
    position: relative;
    overflow: hidden;
}

.menu-slider__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    transition: transform var(--transition-slow);
}

.menu-slider__slide {
    flex: 0 0 100%;
    margin: 0;
}

/* No-JS fallback */
.menu-slider:not(.is-enhanced) .menu-slider__track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transition: none;
}

.menu-slider:not(.is-enhanced) .menu-slider__slide {
    scroll-snap-align: center;
}

.menu-slider:not(.is-enhanced) .menu-slider__nav {
    display: none;
}

/* Prev/next grouped in a single gold control block, pinned to the
   bottom-right corner of the image (per design - no dots). */
.menu-slider__nav {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    background: var(--color-accent-light);
}

.menu-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 56px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-primary);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-base);
}

.menu-slider__arrow:hover,
.menu-slider__arrow:focus-visible {
    background: var(--color-accent-dark);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .menu-slider__track {
        transition: none;
    }
}

/* Regular menu: groups of item + price rows */
.menu-groups {
    display: grid;
    gap: var(--space-8);
}

.menu-group__title {
    margin: 0 0 var(--space-4);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: var(--fs-h3-sm);
    font-weight: var(--fw-regular);
}

.menu-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menu-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: var(--space-4);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.menu-row__item {
    color: var(--color-text-dark);
}

.menu-row__price {
    color: var(--color-primary);
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Builder section: Suggesties - "Ontdek onze suggesties".
   Same layout as the Regular menu sections on the Menu page: a sticky image
   slider (the picked items' photos) on the left, the items grouped by their
   Menu-page section (Voorgerechten, Hoofdgerechten...) on the right, with up
   to two CTA buttons below the list. The editor picks the items from the
   Menu page's Suggesties sections (see coemans_get_suggesties_index()).
   --------------------------------------------------------------------------- */
.suggesties-carousel {
    padding-block: var(--space-12);
}

.suggesties-carousel--dark {
    background: var(--color-primary);
    color: var(--color-text-light);
}

.suggesties-carousel--white {
    background: var(--color-bg);
    color: var(--color-text-dark);
}

.suggesties-carousel__title {
    margin: 0 0 var(--space-8);
    font-family: var(--font-heading);
    font-size: var(--fs-h2-sm); /* 40px */
    font-weight: var(--fw-regular);
    line-height: var(--lh-tight);
}

.suggesties-carousel--dark .suggesties-carousel__title {
    color: var(--color-bg-alt); /* #F3F3F3 */
}

.suggesties-carousel--white .suggesties-carousel__title {
    color: var(--color-accent-dark);
}

/* Slider + menu side by side - mirrors .menu-section--media-left/right in
   menu.css. The slider comes first in the markup; --media-right moves it to
   the second column. */
.suggesties-carousel--media .suggesties-carousel__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-14);
    align-items: start;
}

.suggesties-carousel--media-right .suggesties-carousel__media {
    order: 2;
}

/* The slider stays pinned while the (usually taller) list scrolls past. */
.suggesties-carousel__media {
    position: sticky;
    top: var(--space-8);
    align-self: start;
}

.suggesties-carousel--no-media .suggesties-carousel__content {
    max-width: 760px;
}

/* Dark block: invert the shared menu list colours. */
.suggesties-carousel--dark .menu-group__title {
    color: var(--color-text-white);
}

.suggesties-carousel--dark .menu-row {
    border-bottom-color: var(--color-primary-hover);
}

.suggesties-carousel--dark .menu-row__item {
    color: var(--color-text-light);
}

.suggesties-carousel--dark .menu-row__price {
    color: var(--color-text-white);
}

/* CTA buttons */
.suggesties-carousel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

@media (max-width: 1023px) {
    .suggesties-carousel {
        padding-block: var(--space-10);
    }

    .suggesties-carousel--media .suggesties-carousel__body {
        gap: var(--space-6);
    }
}

@media (max-width: 767px) {
    .suggesties-carousel {
        padding-block: var(--space-8);
    }

    .suggesties-carousel__title {
        margin-bottom: var(--space-6);
        font-size: var(--fs-h3);
    }

    /* Stack: image above the list, not pinned. */
    .suggesties-carousel--media .suggesties-carousel__body {
        grid-template-columns: 1fr;
    }

    .suggesties-carousel--media-right .suggesties-carousel__media {
        order: 0;
        position: static;
    }
}