/* ── TBC Creative Story Block ── */

.tbc-story-section {
    background: #ffffff;
    color: var(--tbc-color-black);
    container-type: inline-size;
}
@media (min-width: 768px){
    .tbc-story-section .tbc-container{
        padding-right: 0;
    }
}
.tbc-story-section .tbc-container{
    max-width: 100%;
}
@media (max-width: 768px){
    .tbc-story-section .tbc-container{
        padding-top: 1.25rem;
    }
}

.tbc-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    /* gap: var(--space-60-24); */
}

.tbc-story-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 375px;
    margin-inline: auto;
    padding-block: var(--space-40-20);
}

.tbc-story-eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 16%;
    color: currentColor;
    margin-bottom: var(--space-40-20);
}

.tbc-story-heading {
    font-family: var(--tbc-font-heading);
    font-size: var(--fs-32-24);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.tbc-story-body {
    margin-bottom: var(--space-40-20);
}
.tbc-story-body p {
    font-size: var(--fs-22-18);
    line-height: 1.5;
    margin-bottom: 1rem;
}
.tbc-story-body p:last-child {
    margin-bottom: 0;
}

.tbc-story-quote {
    font-family: var(--tbc-font-body);
    font-size: var(--fs-28-16);
    font-weight: 400;
    color: var(--tbc-color-black);
    margin: 1rem 0 2rem;
}

.tbc-story-quote::before {
    content: "\201C";
}

.tbc-story-quote::after {
    content: "\201D";
}

.tbc-story-cta {
    align-self: flex-start;
    width: max-content;
    white-space: nowrap;
}

.tbc-story-image {
    position: relative;
    overflow: hidden;
}

.tbc-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Responsive ──
   Container query (not @media) — sized against this section's own rendered
   width rather than the browser viewport, so the WP block editor canvas
   (whose iframe width doesn't always match the real frontend viewport)
   still shows the same desktop/mobile layout as the live site. */
@container (max-width: 767.98px) {
    .tbc-story-section {
        padding-top: 20px;
    }
    .tbc-story-grid {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }

    .tbc-story-content {
        order: 2;
        max-width: 100%;
    }

    .tbc-story-image {
        order: 1;
    }
}