/* =====================================================
   WHY CHOOSE US — PHOTO BENTO
   ====================================================== */

.why-choose {
    padding: var(--section-pad) 24px;
    background:
        radial-gradient(circle at 85% 4%, rgba(254, 111, 1, .13), transparent 42%),
        #16150f;
}

.wc-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* ---- Header ---- */
.wc-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: var(--header-gap);
}

.wc-badge {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .12);
    border: 1px solid rgba(254, 111, 1, .3);
    color: var(--orange-light, #ff9445);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.wc-title {
    max-width: 640px;
    font-family: "Manrope", sans-serif;
    font-size: clamp(28px, 3.8vw, 44px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -1.5px;
    color: #ffffff;
}

.wc-title em {
    font-style: normal;
    color: var(--orange, #fe6f01);
}

.wc-subtitle {
    max-width: 380px;
    padding-bottom: 6px;
    color: rgba(255, 255, 255, .55);
    font-size: 15px;
    line-height: 1.7;
}

/* ---- Bento Grid ---- */
.wc-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px;
    gap: 16px;
}

.wc-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .08);
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1),
                border-color 420ms ease,
                box-shadow 420ms ease;
}

.wc-tile:hover {
    transform: translateY(-5px);
    border-color: rgba(254, 111, 1, .45);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.wc-tile-lg {
    grid-column: span 2;
    grid-row: span 2;
    padding: 32px;
}

.wc-tile-wide {
    grid-column: span 2;
}

/* Closing tile runs the full four columns so the bento stays packed. */
.wc-tile-full {
    grid-column: span 4;
}

/* ---- Media ---- */
.wc-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    transition: transform 900ms cubic-bezier(.2, .8, .2, 1);
}

.wc-tile:hover .wc-media {
    transform: scale(1.07);
}

.wc-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(10, 10, 8, .93) 8%, rgba(10, 10, 8, .62) 46%, rgba(10, 10, 8, .18) 100%);
    transition: background 420ms ease;
}

.wc-tile:hover::after {
    background: linear-gradient(to top, rgba(10, 10, 8, .95) 8%, rgba(28, 18, 4, .62) 46%, rgba(10, 10, 8, .16) 100%);
}

/* ---- Content ---- */
.wc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 6px 13px;
    margin-bottom: 12px;
    border-radius: 100px;
    background: rgba(254, 111, 1, .16);
    border: 1px solid rgba(254, 111, 1, .34);
    color: var(--orange-light, #ff9445);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.wc-name {
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.6px;
    color: #ffffff;
}

.wc-tile-lg .wc-name {
    font-size: clamp(24px, 2.4vw, 32px);
    letter-spacing: -1.1px;
}

.wc-desc {
    margin-top: 9px;
    max-width: 460px;
    color: rgba(255, 255, 255, .68);
    font-size: 14px;
    line-height: 1.62;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: opacity 420ms ease, max-height 420ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}

/*
 * Two lines, whole.
 *
 * A tile's row is a fixed 210px and the tile clips what does not fit, so the description — the last
 * flex item — was squeezed by whatever height was left: a second line started and its words were cut
 * through the middle. `flex-shrink: 0` stops the squeeze, and the line clamp means a description too
 * long for the tile ends in an ellipsis rather than half a line. The CMS caps the text at 120
 * characters so this is a safety net rather than something operators meet.
 *
 * The large tile keeps its own behaviour: it is twice as tall, its description is always visible and
 * it has room for more than two lines.
 */
.wc-desc {
    flex-shrink: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.wc-tile-lg .wc-desc,
.wc-tile:hover .wc-desc,
.wc-tile:focus-within .wc-desc {
    opacity: 1;
    /* Exactly two lines of this type, so the reveal never stops part-way through one. */
    max-height: calc(14px * 1.62 * 2);
    transform: translateY(0);
}

/* The large tile is twice as tall and its description is always on screen: no clamp needed. */
.wc-tile-lg .wc-desc {
    display: block;
    -webkit-line-clamp: none;
    line-clamp: none;
    max-height: 190px;
}

/* ---- Chips inside the large tile ---- */
.wc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

/*
 * On a small tile the chips stand aside for the description.
 *
 * A tile's row is a fixed 210px, and kicker + title + two lines of description + a row of chips do
 * not fit in it — which is why the second line of the description used to be cut through the middle.
 * The two swap places on hover, with the same timing, so at rest the tile looks exactly as the
 * approved design draws it and on hover the detail is readable in full. The large tile is twice as
 * tall and shows both at once, as it always has.
 */
.wc-tile:not(.wc-tile-lg):hover .wc-chips,
.wc-tile:not(.wc-tile-lg):focus-within .wc-chips {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    transition: opacity 260ms ease, max-height 420ms ease, margin-top 420ms ease;
}

.wc-tile:not(.wc-tile-lg) .wc-chips {
    max-height: 120px;
    transition: opacity 420ms ease 120ms, max-height 420ms ease, margin-top 420ms ease;
}

.wc-chip {
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 300ms ease, transform 300ms ease;
}

.wc-chip:hover {
    background: rgba(254, 111, 1, .25);
    transform: translateY(-2px);
}

/* ---- Stat Strip ---- */
.wc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.wc-stat {
    padding: 22px 24px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .09);
    transition: background 340ms ease, transform 340ms cubic-bezier(.2, .8, .2, 1), border-color 340ms ease;
}

.wc-stat:hover {
    background: rgba(254, 111, 1, .1);
    border-color: rgba(254, 111, 1, .32);
    transform: translateY(-4px);
}

.wc-stat strong {
    display: block;
    font-family: "Manrope", sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1.2px;
    color: var(--orange, #fe6f01);
    line-height: 1;
}

.wc-stat span {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
}

/* =====================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1000px) {
    .wc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .wc-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 200px;
    }
    .wc-tile-lg,
    .wc-tile-wide,
    .wc-tile-full {
        grid-column: span 2;
    }
    .wc-tile-lg {
        grid-row: span 2;
    }
    .wc-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .why-choose {
        padding: var(--section-pad) 20px;
    }
    .wc-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }
    .wc-tile {
        min-height: 250px;
    }
    .wc-tile-lg {
        min-height: 340px;
    }
    .wc-tile,
    .wc-tile-lg,
    .wc-tile-wide,
    .wc-tile-full {
        grid-column: span 1;
        padding: 22px;
    }
    /* The tile grows to fit at this width, so there is nothing to clamp against and nothing to
       stand aside for: the description and the chips are both simply shown. */
    .wc-desc,
    .wc-tile-lg .wc-desc,
    .wc-tile:hover .wc-desc,
    .wc-tile:focus-within .wc-desc {
        opacity: 1;
        max-height: 190px;
        transform: none;
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
    }
    .wc-tile:not(.wc-tile-lg):hover .wc-chips,
    .wc-tile:not(.wc-tile-lg):focus-within .wc-chips {
        opacity: 1;
        max-height: 120px;
        margin-top: 18px;
    }
    .wc-stat {
        padding: 18px 20px;
    }
}