/* ==========================================================================
   cb-made-by.css — Made By Meadan (BTYP)
   Figma node 5170:17756 — 1440px

   Section: bg-white, px-60px, pb-80px, no pt (gallery starts immediately)
   Inner: max-width 1320px, flex-col, gap-60px between all blocks
   ========================================================================== */

/* ── Section ────────────────────────────────────────────────────────────────── */
.cb-made-by {
    background-color: var(--color-white, #fff);
    padding-inline: 60px;
    padding-bottom: 80px;
    /* padding-top: 0 — gallery images start at the very top */
}

/* ── Inner wrapper — max-width, flex column, 60px gap between all blocks ─────── */
.cb-made-by__inner {
    max-width: var(--max-width); /* 1320px */
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* ── ① Top gallery container ────────────────────────────────────────────────── */
/* Figma: flex-col, gap-20px, w-full (sits within 60px inset, not full-bleed) */
.cb-made-by__top-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Portrait row: 2 images side-by-side, gap-20px */
.cb-made-by__top-row {
    display: flex;
    gap: 20px;
}

/* Each portrait: flex-1, aspect 660/750 */
.cb-made-by__portrait-wrap {
    flex: 1 0 0;
    aspect-ratio: 660 / 750;
    margin: 0;
    overflow: hidden;
}

.cb-made-by__portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--image-hover-duration, 0.5s) var(--image-hover-ease, ease);
}

.cb-made-by__top-row .cb-made-by__portrait-wrap:hover .cb-made-by__portrait-img {
    transform: scale(var(--image-hover-scale, 1.03));
}

/* Landscape: full content width, fixed height 752px */
.cb-made-by__landscape-wrap {
    width: 100%;
    height: 752px;
    margin: 0;
    overflow: hidden;
}

.cb-made-by__landscape-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── ② Divider ──────────────────────────────────────────────────────────────── */
/* Figma: 0.5px, 1338px wide (matches max-width), rgba opacity ~50% */
.cb-made-by__divider {
    border: none;
    border-top: 0.5px solid rgba(28, 28, 28, 0.5);
    width: 100%;
}

/* ── ③ Text section — flex-col, gap-20px ────────────────────────────────────── */
/* Contains: text+image row and 4-portrait gallery */
.cb-made-by__text-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Text + image row — Figma: justify-between, items-start */
.cb-made-by__text-image {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

/* Left content: w-538px, flex-col, gap-40px (text-container inside has gap-28px) */
.cb-made-by__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: 538px;
    display: flex;
    flex-direction: column;
    gap: 28px; /* Figma text-container gap */
}

/* Eyebrow: Geist 500, 14px, uppercase */
.cb-made-by__eyebrow {
    font-family: var(--font-body);
    font-size: 0.875rem;    /* 14px */
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Heading: Freight Neo 400, 40px, 115% lh */
.cb-made-by__heading {
    font-family: var(--font-heading);
    font-size: 2.5rem;      /* 40px */
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
    overflow-wrap: break-word;
}

/* Description: Geist 300, 16px, 139% lh */
.cb-made-by__description {
    font-family: var(--font-body);
    font-size: 1rem;        /* 16px */
    font-weight: 300;
    line-height: 1.39;
    color: var(--color-dark, #1c1c1c);
    margin: 0;
}

/* Right image: w-650px, h-488px — Figma: Image (4:3) */
.cb-made-by__image-wrap {
    flex: 1 1 0;
    min-width: 0;
    max-width: 650px;
    height: 488px;
    margin: 0;
    overflow: hidden;
}

.cb-made-by__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--image-hover-duration, 0.5s) var(--image-hover-ease, ease);
}

.cb-made-by__image-wrap:hover .cb-made-by__image {
    transform: scale(var(--image-hover-scale, 1.03));
}

/* ── ④ 4-portrait gallery row ───────────────────────────────────────────────── */
/* Figma: w-1320px, flex row, gap-20px, portraits flex-1 aspect-315/394 */
.cb-made-by__gallery {
    display: flex;
    gap: 20px;
}

.cb-made-by__gallery-item {
    flex: 1 0 0;
    aspect-ratio: 315 / 394;
    margin: 0;
    overflow: hidden;
}

.cb-made-by__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--image-hover-duration, 0.5s) var(--image-hover-ease, ease);
}

.cb-made-by__gallery .cb-made-by__gallery-item:hover .cb-made-by__gallery-img {
    transform: scale(var(--image-hover-scale, 1.03));
}

/* ── ⑤ Caption paragraph ────────────────────────────────────────────────────── */
/* Figma: Geist 300, 16px, lh-1.39, text-center, w-922px */
.cb-made-by__caption {
    font-family: var(--font-body);
    font-size: 1rem;        /* 16px */
    font-weight: 300;
    line-height: 1.39;
    color: var(--color-dark, #1c1c1c);
    text-align: center;
    max-width: 922px;
    margin-inline: auto;
    margin-block: 0;
}

/* ── Tablet (≤ 1200px) ─────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .cb-made-by {
        padding-inline: 40px;
    }

    .cb-made-by__landscape-wrap {
        height: 500px;
    }

    .cb-made-by__content {
        flex: 1 1 44%;
        max-width: none;
    }

    .cb-made-by__image-wrap {
        flex: 1 1 52%;
        max-width: none;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .cb-made-by__content,
    .cb-made-by__image-wrap {
        min-width: 0;
    }
}

/* ── Stack text+image (≤ 900px) ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .cb-made-by__text-image {
        flex-direction: column;
        gap: 40px;
    }

    .cb-made-by__content,
    .cb-made-by__image-wrap {
        flex: none;
        width: 100%;
        max-width: 100%;
    }
}

/* ── Mobile (≤ 639px) ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {
    .cb-made-by {
        padding-inline: 16px;
        padding-bottom: 80px;
    }

    .cb-made-by__inner {
        gap: 40px;
    }

    /* Portrait row: tighter gap */
    .cb-made-by__top-row {
        gap: 20px;
    }

    /* Portraits: keep aspect ratio on mobile */
    .cb-made-by__portrait-wrap {
        aspect-ratio: 660 / 750;
    }

    /* Landscape: shorter on mobile */
    .cb-made-by__landscape-wrap {
        height: 201px;
    }

    /* Text+image: stack vertically */
    .cb-made-by__text-image {
        flex-direction: column;
        gap: 32px;
    }

    .cb-made-by__content {
        flex: none;
        width: 100%;
    }

    .cb-made-by__heading {
        font-size: 2rem;
        line-height: 1;
    }

    .cb-made-by__image-wrap {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
    }

    /* Gallery: tighter gap, keep portrait crops */
    .cb-made-by__gallery {
        gap: 12px;
    }

    .cb-made-by__gallery-item {
        aspect-ratio: 315 / 394;
    }

    /* Caption: full width */
    .cb-made-by__caption {
        max-width: 100%;
    }
}