/* ==========================================================================
   ACF Block: Philosophy Section
   Desktop: 55/45 grid — editorial image left, copy right.
   Mobile:  single column — content-top → image → content-bottom.
   ========================================================================== */

.philosophy-block {
    background-color: var(--block-bg-override, var(--ovelia-colors-powder-50));
    padding-block:    var(--ovelia-block-padding-block);
    border-top:       var(--block-border-top, none);
    border-bottom:    var(--block-border-bottom, none);
    overflow:         hidden;
}

/* --------------------------------------------------------------------------
   Inner — desktop: named-area grid, image spans full height
   -------------------------------------------------------------------------- */
.philosophy-block__inner {
    width:                 min(100%, var(--ovelia-layout-max-width));
    margin:                0 auto;
    display:               grid;
    grid-template-columns: 55% 45%;
    grid-template-areas:
        "image content-top"
        "image content-bottom";
    align-content:         center;
    row-gap:               var(--ovelia-spacing-semantic-gap-md);
    min-height:            33rem;
}

/* --------------------------------------------------------------------------
   Image column
   -------------------------------------------------------------------------- */
.philosophy-block__image-col {
    grid-area:    image;
    padding-left: var(--ovelia-layout-side-padding);
    align-self:   stretch;
    overflow:     hidden;
}

.philosophy-block__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Content columns (shared)
   -------------------------------------------------------------------------- */
.philosophy-block__content-top,
.philosophy-block__content-bottom {
    display:        flex;
    flex-direction: column;
    gap:            var(--ovelia-spacing-semantic-gap-md);
    padding-left:   var(--ovelia-spacing-step-16);
    padding-right:  var(--ovelia-layout-side-padding);
}

.philosophy-block__content-top {
    grid-area:  content-top;
    align-self: end;
}

.philosophy-block__content-bottom {
    grid-area:  content-bottom;
    align-self: start;
}

/* Shown only on mobile, between eyebrow and heading */
.philosophy-block__divider {
    display: none;
}

.philosophy-block__eyebrow {
    font-family:    var(--ovelia-font-style-section-eyebrow-family);
    font-size:      var(--ovelia-font-style-section-eyebrow-size);
    font-weight:    var(--ovelia-font-style-section-eyebrow-weight);
    line-height:    var(--ovelia-font-style-section-eyebrow-line-height);
    letter-spacing: var(--ovelia-font-style-section-eyebrow-letter-spacing);
    text-transform: var(--ovelia-font-style-section-eyebrow-text-transform);
    color:          var(--ovelia-colors-semantic-text-subtle);
    margin:         0;
}

.philosophy-block__heading {
    font-family:  var(--ovelia-font-style-section-header-family);
    font-size:    var(--ovelia-font-style-section-header-size);
    font-weight:  var(--ovelia-font-style-section-header-weight);
    line-height:  var(--ovelia-font-style-section-header-line-height);
    color:        var(--ovelia-colors-semantic-text);
    margin:       0;
}

.philosophy-block__para {
    font-family: var(--ovelia-typography-fontfamily-sans);
    font-size:   var(--ovelia-typography-fontsize-base);
    line-height: var(--ovelia-typography-lineheight-normal);
    color:       var(--ovelia-colors-semantic-text-subtle);
    margin:      0;
}

.philosophy-block__para--lead {
    font-size:   var(--ovelia-typography-fontsize-lg);
    line-height: 1.6;
}

.philosophy-block__cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         1.25rem 2.5rem;
    border:          1px solid var(--ovelia-colors-semantic-text);
    font-family:     var(--ovelia-typography-fontfamily-sans);
    font-size:       var(--ovelia-typography-fontsize-sm);
    font-weight:     var(--ovelia-typography-fontweight-normal);
    letter-spacing:  0.11em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--ovelia-colors-semantic-text);
    width:           fit-content;
    margin-top:      var(--ovelia-spacing-step-6);
    transition:      background-color 0.3s ease, color 0.3s ease;
}

.philosophy-block__cta:hover,
.philosophy-block__cta:focus {
    background-color: var(--ovelia-colors-semantic-text);
    color:            var(--ovelia-colors-semantic-text-inverse);
}

/* --------------------------------------------------------------------------
   Mobile — single column: content-top → image → content-bottom
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .philosophy-block {
        padding-inline: var(--ovelia-layout-side-padding);
    }

    .philosophy-block__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content-top"
            "image"
            "content-bottom";
        min-height:    unset;
        row-gap:       2rem;
        align-content: initial;
    }

    .philosophy-block__image-col {
        padding-left: 0;
        height:       auto;
        aspect-ratio: 3 / 2;
        align-self:   auto;
    }

    .philosophy-block__content-top,
    .philosophy-block__content-bottom {
        align-items: center;
        text-align:  center;
        padding:     0;
        gap:         1.5rem;
    }

    .philosophy-block__divider {
        display:     block;
        width:       3rem;
        height:      1px;
        background:  var(--ovelia-colors-powder-300);
        flex-shrink: 0;
    }

    .philosophy-block__heading {
        font-size:   2.5rem;
        line-height: 3rem;
    }

    .philosophy-block__cta {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .philosophy-block__cta {
        transition: none;
    }
}