/* ==========================================================================
   Single Post — article header, body content, shop-the-look, further reading.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Article header
   -------------------------------------------------------------------------- */
.single-post__header {
    width:           min(100%, var(--ovelia-layout-max-width));
    margin:          0 auto;
    padding-inline:  var(--ovelia-layout-side-padding);
    padding-block:   var(--ovelia-spacing-step-16) var(--ovelia-spacing-step-12);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    text-align:      center;
    gap:             var(--ovelia-spacing-step-4);
}

.single-post__eyebrow {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: center;
    gap:             var(--ovelia-spacing-step-2);
    font-family:     var(--ovelia-typography-fontfamily-sans);
    font-size:       var(--ovelia-typography-fontsize-xs);
    font-weight:     var(--ovelia-typography-fontweight-normal);
    letter-spacing:  0.0833em;
    text-transform:  uppercase;
    color:           var(--ovelia-colors-semantic-text-subtle);
    margin:          0;
}

.single-post__eyebrow-link {
    color:           inherit;
    text-decoration: none;
    transition:      color 0.3s ease;
}

.single-post__eyebrow-link:hover,
.single-post__eyebrow-link:focus {
    color: var(--ovelia-colors-semantic-text);
}

.single-post__eyebrow-separator {
    color: var(--ovelia-colors-semantic-text-subtle);
}

.single-post__title {
    font-family:    var(--ovelia-font-style-page-title-family);
    font-size:      var(--ovelia-font-style-page-title-size);
    font-weight:    var(--ovelia-font-style-page-title-weight);
    line-height:    var(--ovelia-font-style-page-title-line-height);
    letter-spacing: var(--ovelia-font-style-page-title-letter-spacing);
    color:          var(--ovelia-colors-semantic-text);
    margin:         0;
}

.single-post__excerpt {
    font-family: var(--ovelia-typography-fontfamily-sans);
    font-size:   var(--ovelia-typography-fontsize-lg);
    line-height: var(--ovelia-typography-lineheight-relaxed);
    color:       var(--ovelia-colors-semantic-text-subtle);
    max-width:   42rem;
    margin:      0 auto;
}

.single-post__media {
    width:        100%;
    aspect-ratio: 21 / 9;
    overflow:     hidden;
    margin-top:   var(--ovelia-spacing-step-2);
    background-color: var(--ovelia-colors-powder-200);
}

.single-post__image {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  var(--post-focal-point, center);
    display:          block;
}

@media (max-width: 1023px) {
    .single-post__header {
        padding-block: var(--ovelia-spacing-step-12) var(--ovelia-spacing-step-8);
    }

    .single-post__title {
        font-size:   var(--ovelia-typography-fontsize-4xl);
        line-height: var(--ovelia-typography-lineheight-tight);
    }

    .single-post__media {
        aspect-ratio: 16 / 9;
    }
}

/* --------------------------------------------------------------------------
   Article content
   -------------------------------------------------------------------------- */
.single-post__content {
    width:          min(100%, 50rem);
    margin:         0 auto;
    padding-inline: var(--ovelia-layout-side-padding);
    padding-block:  var(--ovelia-spacing-step-12);
    display:        flex;
    flex-direction: column;
    gap:            var(--ovelia-spacing-step-6);
    font-family:    var(--ovelia-typography-fontfamily-sans);
    font-size:      var(--ovelia-typography-fontsize-lg);
    line-height:    var(--ovelia-typography-lineheight-relaxed);
    color:          var(--ovelia-colors-semantic-text);
}

.single-post__content > * {
    margin: 0;
}

.single-post__content h2,
.single-post__content h3 {
    font-family: var(--ovelia-typography-fontfamily-serif);
    font-weight: var(--ovelia-typography-fontweight-normal);
    line-height: var(--ovelia-typography-lineheight-tight);
    color:       var(--ovelia-colors-semantic-text);
    margin-top:  var(--ovelia-spacing-step-4);
}

.single-post__content h2 {
    font-size: var(--ovelia-typography-fontsize-3xl);
}

.single-post__content h3 {
    font-size: var(--ovelia-typography-fontsize-2xl);
}

.single-post__content blockquote {
    font-family:  var(--ovelia-typography-fontfamily-serif);
    font-style:   italic;
    font-size:    var(--ovelia-typography-fontsize-xl);
    line-height:  var(--ovelia-typography-lineheight-relaxed);
    color:        var(--ovelia-colors-semantic-text-subtle);
    border-left:  2px solid var(--ovelia-colors-semantic-border-strong);
    padding-left: var(--ovelia-spacing-step-6);
}

.single-post__content blockquote > * {
    margin: 0;
}

.single-post__content a {
    color:                 var(--ovelia-colors-semantic-text);
    text-decoration:       underline;
    text-underline-offset: 0.2em;
    transition:            color 0.3s ease;
}

.single-post__content a:hover,
.single-post__content a:focus {
    color: var(--ovelia-colors-semantic-text-subtle);
}

.single-post__content ul,
.single-post__content ol {
    display:         flex;
    flex-direction:  column;
    gap:             var(--ovelia-spacing-step-2);
    padding-inline-start: var(--ovelia-spacing-step-6);
}

.single-post__content figure,
.single-post__content img {
    max-width: 100%;
    height:    auto;
}

/* --------------------------------------------------------------------------
   Further Reading (related articles)
   -------------------------------------------------------------------------- */
.further-reading {
    background-color: var(--ovelia-colors-semantic-surface-elevated);
    padding-block:    var(--ovelia-spacing-step-16);
    margin-top:       var(--ovelia-spacing-step-12);
}

.further-reading__inner {
    width:          min(100%, var(--ovelia-layout-max-width));
    margin:         0 auto;
    padding-inline: var(--ovelia-layout-side-padding);
    display:        flex;
    flex-direction: column;
    gap:            var(--ovelia-spacing-step-8);
}

.further-reading__header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-end;
    gap:             var(--ovelia-spacing-step-6);
}

.further-reading__heading {
    font-family: var(--ovelia-typography-fontfamily-serif);
    font-size:   var(--ovelia-typography-fontsize-3xl);
    font-weight: var(--ovelia-typography-fontweight-normal);
    color:       var(--ovelia-colors-semantic-text);
    margin:      0;
}

.further-reading__view-all {
    display:         inline-flex;
    align-items:     center;
    font-family:     var(--ovelia-typography-fontfamily-sans);
    font-size:       var(--ovelia-typography-fontsize-sm);
    font-weight:     var(--ovelia-typography-fontweight-normal);
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--ovelia-colors-semantic-text);
    border-bottom:   1px solid var(--ovelia-colors-semantic-text-subtle);
    padding-bottom:  2px;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      border-color 0.3s ease;
}

.further-reading__view-all:hover,
.further-reading__view-all:focus {
    border-color: var(--ovelia-colors-semantic-text);
}

.further-reading__grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--ovelia-spacing-step-6);
    list-style:            none;
    margin:                0;
    padding:               0;
}

@media (max-width: 1023px) {
    .further-reading__header {
        flex-direction: column;
        align-items:    center;
        text-align:     center;
        gap:            var(--ovelia-spacing-step-4);
    }

    .further-reading__grid {
        grid-template-columns: 1fr;
        gap:                   var(--ovelia-spacing-step-8);
    }
}

@media (prefers-reduced-motion: reduce) {
    .single-post__content a,
    .single-post__eyebrow-link,
    .further-reading__view-all {
        transition: none;
    }
}