/**
 * About Page Section Blocks
 *
 * Styles for:
 * - Early Career / Today (two-column career history)
 * - Quote Banner (full-width quote with background)
 * - The Art of Creation (image + text split)
 * - Where Craftsmanship Meets Evolving Design (50/50 with quote)
 * - Press Feature (background image with content overlay)
 *
 * @package Zonkey_Child
 */

/* ==========================================================================
   1. Early Career / Today - Two-column text with images in the middle
   ========================================================================== */
.awd-about-career {
    background-color: var(--awd-dark);
    padding: 120px 2rem;
    border-bottom: 1px solid var(--awd-border-subtle, rgba(255, 255, 255, 0.08));
}

/* Block stacking: text-row → images → text-row in DOM order.
   Each text-row is its own 2-column grid. */
.awd-about-career-inner {
    max-width: var(--awd-site-max-width);
    margin: 0 auto;
}

/* Two-column grid for each text row */
.awd-about-career-text-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
}

.awd-about-career-column {
    min-width: 0;
}

/* Images sit between text rows */
.awd-about-career-images {
    display: grid;
    gap: 20px;
    margin: 60px 0;
}

.awd-about-career-images-1 {
    grid-template-columns: 1fr;
}

.awd-about-career-images-2 {
    grid-template-columns: 1fr 1fr;
}

.awd-about-career-images-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.awd-about-career-image {
    overflow: hidden;
}

.awd-about-career-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    min-height: 300px;
}

.awd-about-career-title {
    font-family: var(--font-heading, var(--awd-font-heading, 'Playfair Display', Georgia, serif));
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--awd-text-light, #ffffff);
    margin: 0 0 24px;
    line-height: 1.3;
}

.awd-about-career-text {
    font-weight: 300;
    color: var(--awd-text-muted, #dedede);
    line-height: 1.8;
}

.awd-about-career-text p {
    margin: 0 0 1.2em;
    font-size: 0.95rem;
}

.awd-about-career-text p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .awd-about-career {
        padding: 80px 2rem;
    }

    .awd-about-career-text-row {
        grid-template-columns: 1fr;
    }

    .awd-about-career-column + .awd-about-career-column {
        margin-top: 40px;
    }

}

@media (max-width: 600px) {
    .awd-about-career {
        padding: 60px 1.5rem;
    }

    .awd-about-career-images {
        margin: 30px 0;
    }

    .awd-about-career-images-2 {
        grid-template-columns: 1fr 1fr;
    }

    .awd-about-career-images-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .awd-about-career-image img {
        min-height: auto;
        aspect-ratio: 3 / 2;
    }

    .awd-about-career-title {
        font-size: 20px;
        letter-spacing: 0.1em;
    }

    .awd-about-career-text p {
        font-size: 14px;
    }
}

/* ==========================================================================
   2. Quote Banner - Full-width quote with background image
   ========================================================================== */
.awd-about-quote {
    position: relative;
    background-color: var(--awd-dark);
    padding: 100px 2rem;
    text-align: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.awd-about-quote-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    transition: filter 1s ease;
    z-index: 0;
}

.awd-about-quote.is-in-view .awd-about-quote-bg {
    filter: blur(6px);
}

.awd-about-quote-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--awd-overlay-light, rgba(0, 0, 0, 0.6));
    z-index: 1;
}

.awd-about-quote-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.awd-about-quote-text {
    font-family: var(--font-heading, var(--awd-font-heading, 'Playfair Display', Georgia, serif));
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 300;
    max-width: 700px;
    letter-spacing: 0.05em;
    line-height: 1.6;
    color: var(--awd-text-light, #ffffff);
    margin: 0;
    border: none;
    padding: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .awd-about-quote {
        padding: 70px 1.5rem;
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .awd-about-quote {
        padding: 50px 1.5rem;
    }

    .awd-about-quote-text {
        font-size: 16px;
    }
}

/* ==========================================================================
   3. The Art of Creation - Text left, image right
   ========================================================================== */
.awd-about-art-of-creation {
    background-color: var(--awd-dark);
    padding: 80px 0;
    border-top: 1px solid var(--awd-border-subtle, rgba(255, 255, 255, 0.08));
    border-bottom: 1px solid var(--awd-border-subtle, rgba(255, 255, 255, 0.08));
}

.awd-about-art-of-creation-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: center;
    max-width: var(--awd-site-max-width);
    margin: 0 auto;
}

.awd-about-art-of-creation-image {
    overflow: hidden;
    order: 2;
}

.awd-about-art-of-creation-content {
    order: 1;
}

.awd-about-art-of-creation-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awd-about-art-of-creation-content {
    padding: 0 60px;
}

.awd-about-art-of-creation-title {
    font-family: var(--font-heading, var(--awd-font-heading, 'Playfair Display', Georgia, serif));
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--awd-text-light, #ffffff);
    margin: 0 0 30px;
    line-height: 1.3;
}

.awd-about-art-of-creation-description {
    font-weight: 300;
    color: var(--awd-text-muted, #dedede);
    line-height: 1.8;
}

.awd-about-art-of-creation-description p {
    margin: 0 0 1.2em;
    font-size: 0.95rem;
}

.awd-about-art-of-creation-description p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .awd-about-art-of-creation {
        padding: 30px 0;
    }

    .awd-about-art-of-creation-inner {
        grid-template-columns: 1fr;
    }

    .awd-about-art-of-creation-image img {
        max-height: 400px;
    }

    .awd-about-art-of-creation-content {
        padding:2rem;
    }
}

@media (max-width: 600px) {
    .awd-about-art-of-creation-content {
        padding: 1.5rem;
    }

    .awd-about-art-of-creation-title {
        font-size: 22px;
        letter-spacing: 0.08em;
    }

    .awd-about-art-of-creation-description p {
        font-size: 14px;
    }
}

/* ==========================================================================
   4. Where Craftsmanship Meets Evolving Design - 50/50 with quote
   ========================================================================== */
.awd-about-craftsmanship {
    background-color: var(--awd-dark);
    padding: 0;
    border-top: 1px solid var(--awd-border-subtle, rgba(255, 255, 255, 0.08));
}

.awd-about-craftsmanship-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    align-items: stretch;
}

.awd-about-craftsmanship-image-col {
    overflow: hidden;
}

.awd-about-craftsmanship-image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.awd-about-craftsmanship-content {
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 600px;
}

.awd-about-craftsmanship-title {
    font-family: var(--font-heading, var(--awd-font-heading, 'Playfair Display', Georgia, serif));
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 300;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--awd-text-light, #ffffff);
    margin: 0 0 30px;
    line-height: 1.3;
}

.awd-about-craftsmanship-description {
    font-weight: 300;
    color: var(--awd-text-muted, #dedede);
    line-height: 1.8;
    margin-bottom: 40px;
}

.awd-about-craftsmanship-description p {
    margin: 0 0 1.2em;
    font-size: 0.95rem;
}

.awd-about-craftsmanship-description p:last-child {
    margin-bottom: 0;
}

.awd-about-craftsmanship-quote {
    border-left: 2px solid var(--awd-border-color, rgba(255, 255, 255, 0.1));
    padding: 0 0 0 24px;
    margin: 0;
}

.awd-about-craftsmanship-quote p {
    font-family: var(--font-heading, var(--awd-font-heading, 'Playfair Display', Georgia, serif));
    font-size: clamp(14px, 1.5vw, 18px);
    font-style: italic;
    font-weight: 300;
    line-height: 1.6;
    color: var(--awd-text-muted, #dedede);
    margin: 0 0 12px;
}

.awd-about-craftsmanship-quote cite {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--awd-text-subtle, rgba(255, 255, 255, 0.55));
}

/* Responsive */
@media (max-width: 900px) {
    .awd-about-craftsmanship-inner {
        grid-template-columns: 1fr;
    }

    .awd-about-craftsmanship-image-col img {
        max-height: 450px;
    }

    .awd-about-craftsmanship-content {
        padding: 40px 2rem;
    }
}

@media (max-width: 600px) {
    .awd-about-craftsmanship-content {
        padding: 30px 1.5rem;
    }

    .awd-about-craftsmanship-title {
        font-size: 22px;
        letter-spacing: 0.08em;
    }

    .awd-about-craftsmanship-description p {
        font-size: 14px;
    }

    .awd-about-craftsmanship-quote p {
        font-size: 14px;
    }
}

/* ==========================================================================
   5. Press Feature - 50/50 split: text left, overlapping images right
   Follows bespoke-services-block layout pattern.
   ========================================================================== */
.awd-about-press {
    background-color: var(--awd-dark);
    background-image: url(../images/bckgrd-marble.jpg);
    background-size: cover;
    background-position: center;
    border-top: 1px solid var(--awd-border-color, rgba(255, 255, 255, 0.1));
    overflow: hidden;
}

/* 50/50 grid: text left, images right */
.awd-about-press-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.awd-about-press-text {
    color: var(--awd-text-light, #ffffff);
    padding: 2rem 2rem 0 2rem;
}

.awd-about-press-logo {
    margin-bottom: 1.5rem;
}

.awd-about-press-logo img {
    max-width: 200px;
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.awd-about-press-publication {
    display: block;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--awd-text-subtle, rgba(255, 255, 255, 0.55));
    margin-bottom: 1rem;
}

.awd-about-press-title {
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--awd-text-light, #ffffff);
    margin: 0 0 1.5rem;
    line-height: 1.3;
}

.awd-about-press-description {
    color: var(--awd-text-muted, #dedede);
    font-weight: 300;
    font-size: 0.95rem;
    line-height: 1.8;
    margin: 0 0 2rem;
}

/* Side-by-side images: secondary left, primary right */
.awd-about-press-images {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 16px;
    align-items: center;
}

.awd-about-press-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* Primary image */
.awd-about-press-image-primary {
    grid-column: 2;
    grid-row: 1;
}

/* Secondary image */
.awd-about-press-image-secondary {
    grid-column: 1;
    grid-row: 1;
}

@media (min-width: 1400px) {
    .awd-about-press-text{
        padding-left: calc((100vw - var(--awd-site-max-width)) / 2 + 2rem);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .awd-about-press-text {
        padding: 20px 20px 0 20px;
    }

    .awd-about-press-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

}

@media (max-width: 600px) {
    

    .awd-about-press-title {
        font-size: 1.4rem;
    }

    .awd-about-press-description {
        font-size: 14px;
    }

    .awd-about-press-logo img {
        max-width: 150px;
    }

    .awd-about-press-images {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .awd-about-press-image-primary {
        grid-column: 1;
        grid-row: 1;
    }

    .awd-about-press-image-secondary {
        grid-column: 1;
        grid-row: 2;
    }

    .awd-about-press-image-primary img {
        height: auto;
    }
}