/*
 * Site Journal: brand defaults for the Article Body and Journal Topics
 * widgets only (LEOCE-ELEMENTOR-WIDGET-RULES.md, section 4). No page
 * styling: the Journal's four templates are Willem's, built in Elementor.
 * Colour, font and spacing values here are the SAME defaults already baked
 * into each control's own 'default', so this file only needs to carry
 * structure Style-tab controls do not: box sizing, image sizing, list
 * markers, and the Topics bar's own layout and phone scroll behaviour.
 */

/* ── Article Body ── */
.leoce-article__body,
.leoce-article__body *,
.leoce-article__body *::before,
.leoce-article__body *::after {
    box-sizing: border-box;
}
.leoce-article__body {
    font-family: 'Open Sans', system-ui, sans-serif;
    color: #55595F;
}
.leoce-article__body > *:first-child {
    margin-top: 0;
}
.leoce-article__body > *:last-child {
    margin-bottom: 0;
}
.leoce-article__body h2 {
    font-family: 'Cormorant Garamond', 'Gretha', Georgia, serif;
    color: #2A2A2A;
}
.leoce-article__body p {
    font-family: 'Open Sans', system-ui, sans-serif;
}
.leoce-article__body a {
    color: #C39992;
    text-decoration: underline;
    transition: color 0.2s ease;
}
.leoce-article__body a:hover {
    color: #2A2A2A;
}
.leoce-article__body ul,
.leoce-article__body ol {
    padding-left: 22px;
    margin: 0 0 24px 0;
}
.leoce-article__body li {
    margin-bottom: 0.4em;
}
.leoce-article__body li::marker {
    color: #C3A8A2;
}
.leoce-article__body figure {
    margin: 32px 0;
}
.leoce-article__body img {
    display: block;
    max-width: 100%;
    height: auto;
    /* Left edge on the text's left edge; photos narrower than the column are not stretched (they would blur). */
    margin: 32px 0;
}
.leoce-article__body figcaption {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 13px;
    color: #55595F;
    text-align: center;
    margin-top: 8px;
}

/* ── Journal Topics ── */
.leoce-topics {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
}
.leoce-topics__link {
    font-family: 'Open Sans', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #55595F;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.leoce-topics__link:hover {
    color: #2A2A2A;
}
.leoce-topics__link[aria-current="page"] {
    color: #C39992;
}

/* Phones: the bar scrolls sideways inside itself instead of wrapping to a
   second and third line, so it stays one row at any width. */
@media (max-width: 767px) {
    .leoce-topics {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .leoce-topics::-webkit-scrollbar {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .leoce-article__body a,
    .leoce-topics__link {
        transition: none;
    }
}

/* ── Article Header (leoce-luxury-couture-article-header) ──
   Layout only; type and colour come from the widget's Style controls. */
.leoce-ahead {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.leoce-ahead__text {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
.leoce-ahead__media {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}
/* Two classes deep, so Elementor's own img { height: auto } cannot win. */
.leoce-ahead .leoce-ahead__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.leoce-ahead__eyebrow,
.leoce-ahead__meta {
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.leoce-ahead__meta { margin-bottom: 28px; }
.leoce-ahead__title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.12;
}
.leoce-ahead__rule {
    display: block;
    width: 32px;
    height: 1px;
    margin: 28px 0;
    background: currentColor;
    opacity: 0.35;
}
.leoce-ahead__subtitle { margin: 0 0 22px; font-style: italic; line-height: 1.35; }
.leoce-ahead__intro { margin: 0 0 22px; line-height: 1.7; max-width: 36ch; }
.leoce-ahead__byline { margin: 0; font-style: italic; }
@media (max-width: 767px) {
    .leoce-ahead { flex-direction: column-reverse; }
    .leoce-ahead__text { flex-basis: auto !important; }
}

/* ── Article layout blocks (September 2026) ──
   Photo beside text, a row of photos, a pull quote, a section label.
   Layout only; type and colour come from the Article Body's Style controls. */
.leoce-article__body::after { content: ""; display: table; clear: both; }
.leoce-article__body .leoce-figure--left,
.leoce-article__body .leoce-figure--right {
    width: 44%;
    margin-top: 6px;
    margin-bottom: 24px;
}
.leoce-article__body .leoce-figure--left  { float: left;  margin-right: 40px; }
.leoce-article__body .leoce-figure--right { float: right; margin-left: 40px; }
.leoce-article__body .leoce-figure--left img,
.leoce-article__body .leoce-figure--right img,
.leoce-article__body .leoce-gallery img { width: 100%; margin: 0; }
.leoce-article__body h2,
.leoce-article__body h3.leoce-label,
.leoce-article__body .leoce-gallery,
.leoce-article__body blockquote.leoce-quote { clear: both; }
.leoce-article__body .leoce-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
    margin: 40px 0;
}
.leoce-article__body .leoce-gallery figure { margin: 0; }
.leoce-article__body .leoce-gallery img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.leoce-article__body figcaption {
    margin-top: 10px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
}
.leoce-article__body h3.leoce-label {
    margin: 56px 0 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(195, 168, 162, 0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.leoce-article__body blockquote.leoce-quote {
    margin: 48px 0;
    padding: 0 8%;
    border: 0;
    text-align: center;
}
.leoce-article__body blockquote.leoce-quote p { margin: 0; font-style: italic; line-height: 1.35; }
@media (max-width: 767px) {
    .leoce-article__body .leoce-figure--left,
    .leoce-article__body .leoce-figure--right { float: none; width: 100%; margin: 24px 0; }
    .leoce-article__body .leoce-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}