/*
 * Single blog post - Figma `1:4276` (desktop) / `1:1907` (mobile).
 *
 * Hero, intro band, body and the Related Articles rail. The card in that rail
 * is not here: it is the archive's card, in assets/css/blog-card.css.
 *
 * The body is `the_content()`, so everything under `.article-body-inner` is
 * styled by element. Existing posts are h2 + h4 + p + ul + a with no inline
 * images, and the frame's own composition is h3 + h2 + photo + p + ul, so both
 * have to read correctly under the same rules.
 */

/*
 * Hero, `1:4278`. A 533 text column at x=32 and a 792 image bleeding off the
 * right edge, 659 tall. The two are 533 + 792 = 1325 of 1440 with the gap
 * between them taking the rest, which is what space-between gives.
 */
.article-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-small);
    padding-left: var(--spacing-small);
}

.article-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 533px;
    min-height: 659px;
    padding-block: 40px;
}

.article-hero-media {
    flex: 0 0 55%;
    aspect-ratio: 792 / 659;
}

.article-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ariane, `1:4280`. BLOG in Silver, ARTICLE in Shark, 12px apart. */
.article-ariane {
    display: flex;
    gap: 12px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.article-ariane-parent,
.article-ariane-parent:hover {
    color: var(--Medium-Grey);
}

.article-ariane-current {
    color: var(--color-shark);
}

/* D1 at 1440 down to the frame's 34 mobile cut. */
.article-title {
    font-family: var(--font-primary);
    font-size: clamp(34px, 4.445vw, 64px);
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-shark);
    margin: 24px 0 0;
}

.article-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
}

/* Same chip as the card's, `1:4286`. */
.article-date {
    background: var(--color-white-100);
    color: var(--Dark-Grey);
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 8px;
}

.article-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 300;
    line-height: 1.3;
    color: var(--color-shark);
}

.article-reading-time .icon-clock {
    width: 24px;
    height: 24px;
    flex: none;
}

/*
 * Intro, `1:4295`. An authored WYSIWYG on the White 100 band, set in Lyon 24
 * rather than the body's Geologica - it is the standfirst, not the first
 * paragraph of the article.
 */
.article-intro {
    background: var(--color-white-100);
    padding: 72px var(--spacing-small);
}

.article-intro-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: flex-start;
    width: 676px;
    max-width: 100%;
}

.article-intro-text {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-shark);
}

.article-intro-text > *:first-child {
    margin-top: 0;
}

.article-intro-text > *:last-child {
    margin-bottom: 0;
}

.article-intro-text p {
    margin: 0 0 40px;
}

/* Social row, `1:4299`. 32px marks, 12px apart. */
.article-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-socials a {
    display: block;
    color: var(--color-shark);
}

.article-socials .icon-social {
    display: block;
    width: 32px;
    height: 32px;
}

/*
 * Body, `1:4307`. An Off-White column 1052 wide on the White 100 ground, with
 * 72 of inline padding - so the content column is 908. Text runs in a 700
 * measure centred inside that, and photographs take the full 908.
 */
.article-body {
    background: var(--color-white-100);
    padding: 0 194px 120px;
}

.article-body-inner {
    background: var(--color-offwhite);
    padding: 72px 72px 120px;
}

.article-body-inner > * {
    width: 100%;
    max-width: 700px;
    margin-inline: auto;
}

.article-body-inner > *:first-child {
    margin-top: 0;
}

.article-body-inner > *:last-child {
    margin-bottom: 0;
}

/* The section title. H1 in the frame's scale, Lyon Regular. */
.article-body-inner > h2 {
    font-family: var(--font-primary);
    font-size: clamp(28px, 3.334vw, 48px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--color-shark);
    margin-block: 72px 24px;
}

/* The eyebrow above it - "Andros", `1:4312`. Lyon Bold. */
.article-body-inner > h3 {
    font-family: var(--font-primary);
    font-size: clamp(20px, 1.945vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-shark);
    margin-block: 72px 12px;
}

/* An h2 that follows its eyebrow keeps the pair's own 12px, not a new section. */
.article-body-inner > h3 + h2 {
    margin-top: 0;
}

/* The subheads the existing posts already use. */
.article-body-inner > h4 {
    font-family: var(--font-primary);
    font-size: clamp(20px, 1.667vw, 24px);
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-shark);
    margin-block: 40px 16px;
}

.article-body-inner > p {
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
    margin-block: 0 16px;
}

.article-body-inner > ul,
.article-body-inner > ol {
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
    list-style-position: outside;
    padding-left: 24px;
    margin-block: 0 16px;
}

.article-body-inner > ul {
    list-style-type: disc;
}

.article-body-inner li {
    margin-bottom: 8px;
}

.article-body-inner li:last-child {
    margin-bottom: 0;
}

.article-body-inner a {
    color: inherit;
    text-decoration: underline;
}

/*
 * Photographs break out of the measure to the full 908, `1:4314`. Core wraps an
 * image in a figure, or in a .wp-block-image div when it carries an alignment.
 */
.article-body-inner > figure,
.article-body-inner > .wp-block-image,
.article-body-inner > .wp-block-gallery,
.article-body-inner > .wp-block-columns {
    max-width: none;
    margin-block: 24px;
}

/*
 * Scoped through .article-body to out-specify `.single-article .wp-block-image
 * img` in style.css, which caps the service posts' images at 700px tall.
 */
.article-body .article-body-inner > figure img,
.article-body .article-body-inner > .wp-block-image img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 908 / 532;
    object-fit: cover;
    display: block;
}

.article-body-inner figcaption {
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--Dark-Grey);
    margin-top: 8px;
}

/* The side-by-side pair, `1:4364` - two 442 photographs 24 apart. */
.article-body-inner > .wp-block-columns,
.article-body-inner > .wp-block-gallery {
    display: flex;
    gap: 24px;
}

.article-body-inner > .wp-block-columns > .wp-block-column,
.article-body-inner > .wp-block-gallery > .wp-block-image {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

.article-body .article-body-inner > .wp-block-columns img,
.article-body .article-body-inner > .wp-block-gallery img {
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 442 / 479;
    object-fit: cover;
    display: block;
}

/*
 * Related Articles, `1:4375`. The rail is deliberately wider than the page, as
 * Featured Stays is: a 428 card on a track that runs off the right edge, so a
 * fourth card is always part-visible.
 */
.related-articles {
    padding: 120px 0 120px var(--spacing-small);
    overflow: hidden;
}

.related-articles-title {
    color: var(--color-shark);
    margin-bottom: 40px;
}

.relatedArticlesSwiper {
    overflow: visible;
    position: relative;
}

/*
 * The control is `.slider-nav-disc` in style.css. Only its vertical position
 * differs: the shared 50% centres on the whole card, and the frame centres it
 * on the image band. A card is roughly a third of the track and its image is
 * 313/443 of that, so half the image height is about 10.5vw.
 */
.related-articles-nav {
    top: calc(10.5vw - 40px);
}

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1200px) {
    .article-body {
        padding-inline: var(--spacing-med);
    }

    .article-body-inner {
        padding-inline: var(--spacing-med);
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 992px) {
    /*
     * The mobile frame stacks the hero: the text block above, the photograph
     * full-bleed under it.
     */
    .article-hero {
        display: block;
        padding-left: 0;
    }

    .article-hero-text {
        display: block;
        min-height: 0;
        padding: 72px var(--spacing-small) 40px;
    }

    .article-hero-media {
        aspect-ratio: 375 / 312;
    }

    .article-intro {
        padding-block: 72px;
    }

    .article-intro-text {
        font-size: 20px;
    }

    .article-body {
        padding-block: 0 72px;
    }

    .article-body-inner {
        padding-block: 72px;
    }

    .article-body-inner > h2,
    .article-body-inner > h3 {
        margin-top: 56px;
    }

    /* The frame drops the control on mobile, as the other rails do. */
    .related-articles {
        padding-block: 72px;
    }

    .related-articles-nav {
        display: none;
    }
}

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
    .article-body {
        padding-inline: 0;
    }

    .article-body-inner {
        padding-inline: var(--spacing-small);
    }

    /* 150.96 + 9 + 150.96 in a 311 column, `1:1995`. */
    .article-body-inner > .wp-block-columns,
    .article-body-inner > .wp-block-gallery {
        gap: 8px;
    }

    /*
     * The frame keeps the pair side by side at 375. Core stacks columns below
     * 782 with `flex-basis: 100% !important` on the column, so matching the
     * design means answering that in kind - the alternative is asking every
     * editor to remember the block's "stack on mobile" toggle.
     */
    .article-body .article-body-inner > .wp-block-columns {
        flex-wrap: nowrap;
    }

    .article-body .article-body-inner > .wp-block-columns > .wp-block-column {
        flex-basis: 0 !important;
    }
}