/* ==========================================================================
   CAROUSEL
   ==========================================================================
   Miti's carousel rules, copied whole from
   miti-exchange-2027/resources/css/layout.css — the sheet Miti's app.css
   ACTUALLY IMPORTS. An earlier pass took them from layout-2.css, a variant
   copy in the same folder that is imported by nothing: it carries the
   .spec-tab-nav rules but none of .carousel__article, .mkt-cat-chip,
   .mkt-search-btn or .mkt-overview__*, so half the page came out unstyled.
   Check the @import list in Miti's app.css before extracting anything.

   The engine is resources/js/carousel.js, also Miti's, registered as
   Alpine.data('carousel') in app.js. Three modes: hero, multi, single.

   GEOMETRY IS LITERAL, COLOUR IS NOT.

   Every spacing, radius, shadow, type size and duration is written out as
   the value Miti's token resolves to, because the two sites define several
   of those names DIFFERENTLY — --radius-lg is 0.5rem on Miti and 0.875rem
   here, --radius-xl 0.75rem against 1.25rem — and this site has no
   --space-* or --font-size-* at all. Left as var() the carousel would have
   had the wrong corners and no spacing whatever.

   COLOURS stay as var(--color-*): every name used exists here with this
   site's own palette, and a Zuva carousel should be orange rather than
   Miti's teal. That is content, not structure.
   ========================================================================== */

.carousel {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
}

.carousel__track {
    display: flex;
    transition: transform 0.8s ease-in-out;
    touch-action: pan-y;
}

.carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 62.5rem;
    border: none;
    cursor: pointer;
    transition: background 150ms ease, opacity 150ms ease;
    padding: 0;
}

.carousel__arrow--prev { left: 0.75rem; }

.carousel__arrow--next { right: 0.75rem; }

.carousel__dots {
    position: absolute;
    bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.carousel__dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 62.5rem;
    border: 0.0625rem solid var(--color-white);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease, border-color 150ms ease, width 150ms ease;
}

.carousel__dot--active,
.carousel__dot:hover {
    background: var(--color-white);
    border-color: var(--color-white);
}

.carousel--hero {
    margin: 0 auto 0.25rem auto;
}

.carousel--hero .carousel__slide {
    flex: 0 0 100%;
    position: relative;
}

.carousel--hero .carousel__slide-img {
    display: block;
    border-radius: 0.5rem;
}

.carousel__card {
    background: var(--color-white);
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 25rem;
    width: calc(100% - 2rem);
}

.carousel--buycommodities {
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1);
    background: var(--color-brand-900);
    height: 20rem;
    width: 100%;
}

.carousel--buycommodities .carousel__card {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
}

.carousel--buycommodities .carousel__track {
    height: 100%;
}

.carousel--buycommodities .carousel__slide {
    height: 100%;
}

.carousel--buycommodities .carousel__slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel--commodities {
    box-shadow: none;
    background: none;
    height: calc(100vh - 12rem);
    margin-top: -8rem;
    overflow: hidden;
    width: 100%;
}

.carousel--commodities .carousel__track {
    height: 100%;
}

.carousel--commodities .carousel__slide {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.carousel--commodities .carousel__slide-img {
    position: absolute;
    bottom: 0;
    right: 5rem;
    max-height: 100%;
    max-width: 100%;
    border-radius: 0;
}

.carousel--commodities .carousel__slide-headline {
    position: relative;
    z-index: 1;
    margin-left: 11rem;
    display: inline-flex;
    flex-direction: column;
    align-self: flex-start;
}

.carousel--commodities .carousel__slide-quote-icon {
    display: block;
    width: 2.5rem;
    height: auto;
    margin-bottom: 0;
    filter:
        drop-shadow(1px 8px 6px rgba(0,0,0,0.5))
        drop-shadow(1px 12px 10px rgba(0,0,0,0.35))
        drop-shadow(1px 16px 16px rgba(0,0,0,0.2));
}

.carousel--commodities .carousel__slide-heading {
    font-size: 5rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.1;
    margin: 0;
    text-shadow:
        1px 1px 1px var(--color-brand-700),
        1px 2px 1px var(--color-brand-700),
        1px 3px 1px var(--color-brand-700),
        1px 4px 1px var(--color-brand-700),
        1px 5px 1px var(--color-brand-700),
        1px 8px 6px rgba(0,0,0,0.5),
        1px 12px 10px rgba(0,0,0,0.35),
        1px 16px 16px rgba(0,0,0,0.2);
}

.carousel--commodities .carousel__slide-prefix {
    font-size: 3rem;
    display: block;
    line-height: 1;
}

.carousel--commodities .carousel__slide-keyword {
    font-family: 'Lobster', cursive;
    display: block;
}

.carousel--commodities .carousel__card {
    position: relative;
    z-index: 1;
    transform: none;
    width: fit-content;
    max-width: 50%;
    box-shadow: none;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    margin-left: 11rem;
}

.carousel--commodities .carousel__dots {
    bottom: 2rem;
}

.carousel__card-avatar {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 0.5rem;
    flex-shrink: 0;
    object-fit: cover;
}

.carousel__card-avatar--initials {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-brand-500);
    color: var(--color-white);
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.carousel__card-body { flex: 1; text-align: left; min-width: 0; }

.carousel__card-name {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-brand-600);
}

.carousel__card-title {
    margin: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-surface-700);
}

.carousel__card-desc {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--color-surface-900);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: anywhere;
}

.carousel__card-cta {
    display: inline-block;
    margin-left: 0;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
    background: var(--color-accent-600);
    color: var(--color-white);
    border-radius: 62.5rem;
    text-decoration: none;
    transition: background 150ms ease;
}

.carousel__card-cta:hover { background: var(--color-accent-700); }

.carousel--hero .miti-card--carousel {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    transform: translateX(-50%);
    /* base .miti-card sets width/min-width:100%; override so the overlay card can be narrower */
    width: min(20rem, calc(100% - 2rem));
    min-width: 0;
    max-width: none;
    z-index: 2;
}

.carousel--hero .carousel__arrow {
    background: rgba(0, 0, 0, 0);
    color: var(--color-white);
    font-size: 1.875rem;
}

.carousel--hero .carousel__arrow:hover { background: rgba(0, 0, 0, 0.3); }

.carousel--hero .carousel__dots { right: 0.75rem; }

.carousel--multi {
    border-radius: 0;
    overflow: visible;
}

.carousel--multi .carousel__track {
    gap: 0.5rem;
}

.carousel--multi .carousel__item {
    flex: none;
    position: relative;
    aspect-ratio: 6 / 4;
    border-radius: 0.5rem;
    overflow: hidden;
}

.carousel--multi .carousel__item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 250ms ease;
}

.carousel--multi .carousel__item:hover > img { transform: scale(1.03); }

.carousel--multi .carousel__item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
    padding: 1.5rem 1rem 1rem;
    pointer-events: none;
}

.carousel--multi .carousel__item-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}

.carousel--multi .carousel__item-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.4;
}

.carousel--multi .carousel__arrow {
    background: var(--color-white);
    color: var(--color-surface-800);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.carousel--multi .carousel__arrow:hover { background: var(--color-surface-50); }

.carousel--single .carousel__track {
    display: block;
    transition: none;
}

.carousel--single .carousel__slide {
    transition: opacity 0.4s ease-in-out;
}

.carousel--single .carousel__slide--hidden { display: none; }

.carousel--single .carousel__slide--active { display: block; }

.carousel--single .carousel__arrow {
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-surface-800);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.carousel--single .carousel__arrow:hover { background: var(--color-white); }

.carousel--single .carousel__dots--center {
    left: 50%;
    transform: translateX(-50%);
}

.carousel--single .carousel__dot {
    border-color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0.3125rem rgba(0, 0, 0, 0.35);
}

.carousel--single .carousel__dot:hover {
    background: var(--color-white);
}

.carousel--single .carousel__dot--active {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
    width: 1.5rem;
}

@media (min-width: 80rem) {
    .carousel--multi .carousel__item { width: calc((100% - 3 * 0.5rem) / 4.3); }
}

@media (max-width: 48rem) {
    .carousel--multi .carousel__item { width: calc((100% - 1 * 0.5rem) / 2.3); }
    .carousel--multi .carousel__item-title { font-size: 1rem; }
    .carousel--multi .carousel__item-desc { font-size: 0.75rem; }
}

@media (min-width: 48rem) and (max-width: 80rem) {
    .carousel--multi .carousel__item { width: calc((100% - 2 * 0.5rem) / 3.3); }
}

.mkt-about.carousel__article {
    height: 17rem;
}

.mkt-about.carousel__article--noimage {
    height: auto;
}

.carousel--featuredarticles {
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18), 0 2px 6px rgb(0 0 0 / 0.1);
    background: var(--color-surface, #fff);
    border-radius: 0.5rem;
    overflow: hidden;
    height: 17rem;
    width: 100%;
}

.carousel--featuredarticles .carousel__track,
.carousel--featuredarticles .carousel__slide {
    height: 100%;
}

.carousel__article {
    display: grid;
    /* A fixed picture column, not auto: a 15.5rem square — the card's inner
       height, 17rem less 0.75rem of padding top and bottom — plus the 0.75rem
       strip on its left that the arrow bar stands in. Sizing the column to the
       picture let the image's intrinsic width win the max-content measurement
       and squeeze the text to nothing. */
    grid-template-columns: 16.25rem 1fr;
    /* One row, the height of the card. Without this the row is auto and takes
       its height from the picture's intrinsic size — 318px for a square photo
       in a 272px card — so the picture overhung and the card clipped it. */
    grid-template-rows: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background: var(--color-surface, #fff);
}

.carousel__article-media {
    display: flex;
    /* Every inset is the width of the arrow bar, so the picture starts where
       the bar ends — the two are flush, with the bar beside the picture rather
       than over it — and the gap above and below it matches. The right is left
       to the body's own left padding. */
    padding: 0.75rem 0 0.75rem 0.75rem;
}

.carousel__article-media img {
    /* A square the height of the card's inner space. The row is definite
       (grid-template-rows: 100%), so the height resolves and the aspect ratio
       gives the width — and the column is auto, so it sizes to the square. */
    height: 100%;
    width: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0.375rem;
    background: var(--color-surface-100);
}

.carousel__article-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 1.25rem 1.25rem 1rem;
    min-width: 0;
}

.carousel__article-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-text-heading, #111827);

    /* Two lines, then ellipsis — a long headline must not push the snippet
       out of a fixed-height slide. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.carousel__article-snippet {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--color-surface-600);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

.carousel__article-cta {
    align-self: flex-start;
    display: inline-block;
    background: var(--color-white);
    color: var(--color-brand-600);
    border: 1px solid var(--color-brand-600);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.carousel__article:hover .carousel__article-cta {
    background: var(--color-surface-50);
}

.carousel--featuredarticles .carousel__dot {
    background: var(--color-surface-300);
}

.carousel--featuredarticles .carousel__dot--active {
    background: var(--color-brand-600, #218979);
}

@media (max-width: 40rem) {
    .carousel--featuredarticles {
        height: 22rem;
    }
    .carousel__article {
        grid-template-columns: 1fr;
        grid-template-rows: 9rem 1fr;
    }
    .carousel__article-media {
        padding: 0.75rem 0.75rem 0;
    }
    .carousel__article-media img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
    .carousel__article-body {
        padding: 0.75rem 1rem;
    }
    .carousel__article-title {
        font-size: 1.125rem;
    }
    .carousel__article-snippet {
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

.carousel--featuredlistings .carousel__item,
.carousel--featuredgrowers .carousel__item {
    aspect-ratio: auto;
    overflow: visible;
    border-radius: 0;
}

.carousel--featuredlistings .carousel__item {
    width: calc((100% - 2 * 0.5rem) / 3);
}

.carousel--featuredgrowers .carousel__item {
    width: calc((100% - 3 * 0.5rem) / 4);
}

@media (max-width: 48rem) {
    .carousel--featuredlistings .carousel__item {
        width: calc((100% - 1 * 0.5rem) / 2);
    }
    .carousel--featuredgrowers .carousel__item {
        width: calc((100% - 2 * 0.5rem) / 3);
    }
}

@media (max-width: 30rem) {
    .carousel--featuredlistings .carousel__item {
        width: 100%;
    }
    .carousel--featuredgrowers .carousel__item {
        width: calc((100% - 1 * 0.5rem) / 2);
    }
}

.carousel--featuredlistings,
.carousel--featuredgrowers {
    overflow: hidden;
}

.carousel--featuredarticles .carousel__arrow,
.carousel--featuredlistings .carousel__arrow,
.carousel--featuredgrowers .carousel__arrow {
    top: 0;
    bottom: 0;
    transform: none;                 /* the shared rule centres by translate */
    width: 0.75rem;
    height: auto;
    border-radius: 0;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: none;
    color: var(--color-surface-700);
    transition: background .15s ease, color .15s ease;
}

.carousel--featuredarticles .carousel__arrow--prev,
.carousel--featuredlistings .carousel__arrow--prev,
.carousel--featuredgrowers .carousel__arrow--prev {
    left: 0;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}

.carousel--featuredarticles .carousel__arrow--next,
.carousel--featuredlistings .carousel__arrow--next,
.carousel--featuredgrowers .carousel__arrow--next {
    right: 0;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

.carousel--featuredarticles .carousel__arrow svg,
.carousel--featuredlistings .carousel__arrow svg,
.carousel--featuredgrowers .carousel__arrow svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    flex: none;
}

.carousel--featuredarticles .carousel__arrow,
.carousel--featuredlistings .carousel__arrow,
.carousel--featuredgrowers .carousel__arrow {
    overflow: visible;
}

.carousel--featuredarticles .carousel__arrow:hover,
.carousel--featuredlistings .carousel__arrow:hover,
.carousel--featuredgrowers .carousel__arrow:hover {
    background: var(--color-brand-600, #218979);
    color: #fff;
}

.carousel__article--noimage {
    grid-template-columns: 1fr;
}

.carousel__article--noimage .carousel__article-body {
    padding-left: 1.25rem;
}