/* =========================================================================
   Mini Site styles
   Enqueued only on pages using page-minisite.php (see functions.php) —
   never loaded site-wide, so it can't affect the main Newspaper theme.
   ========================================================================= */

.minisite-body {
    background: #f7f7f7;
}

/* Utility bar
   ========================================================================= */
.minisite-utility-bar {
    background: var(--minisite-header-bg, #101a2b);
    color: var(--minisite-header-text-color, #ffffff);
    font-family: var(--minisite-utility-font-family, inherit);
    font-size: var(--minisite-utility-font-size, 12.5px);
    font-weight: var(--minisite-utility-font-weight, 400);
}

.minisite-utility-bar__inner {
    max-width: var(--minisite-header-footer-width, 1200px);
    margin: 0 auto;
    padding: 8px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    opacity: 0.85;
}

.minisite-utility-bar__meta,
.minisite-utility-bar__links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.minisite-utility-bar__links {
    gap: 20px;
}

.minisite-utility-bar__sep {
    opacity: 0.6;
}

.minisite-utility-bar__links a {
    color: inherit;
    text-decoration: none;
}

.minisite-utility-bar__links a:hover {
    text-decoration: underline;
}

/* Masthead
   ========================================================================= */
.minisite-masthead {
    background: #ffffff;
    border-bottom: 1px solid #eceff1;
    font-family: var(--minisite-header-font-family, inherit);
}

.minisite-masthead__inner {
    max-width: var(--minisite-header-footer-width, 1200px);
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.minisite-masthead__eyebrow {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a8f98;
}

.minisite-masthead__title-link {
    text-decoration: none;
}

.minisite-masthead__title {
    font-size: var(--minisite-title-font-size, 30px);
    font-weight: var(--minisite-title-font-weight, 700);
    color: var(--minisite-title-color, #16202b);
    line-height: 1.15;
}

.minisite-masthead__title-accent {
    color: var(--minisite-accent-color, #0f6f6a);
}

.minisite-masthead__logo-image {
    max-height: var(--minisite-logo-max-height, 56px);
    max-width: var(--minisite-logo-max-width, 220px);
    width: auto;
    display: block;
}

.minisite-masthead__meta {
    text-align: right;
}

/* Targets the <p> tags directly rather than relying on inheritance from
   .minisite-masthead__meta — the theme's own "p { ... }" style otherwise
   wins over an inherited value, since a rule that directly matches an
   element always beats inheritance from its parent regardless of
   specificity. */
.minisite-masthead__meta p {
    margin: 0;
    color: var(--minisite-meta-text-color, #667085);
    font-size: var(--minisite-meta-font-size, 13px);
    font-weight: var(--minisite-meta-font-weight, 400);
    line-height: 1.6;
}

/* DOI label/value: two separately-styled spans inside the DOI <p> —
   selector needs two classes (.minisite-masthead__meta + the span's own)
   to outrank the "meta p" rule above, since a bare .doi-label selector
   alone would lose to it on specificity. */
.minisite-masthead__meta .minisite-masthead__doi-label {
    color: var(--minisite-doi-label-color, #8a8f98);
    font-size: var(--minisite-doi-label-font-size, 12px);
    font-weight: var(--minisite-doi-label-font-weight, 400);
}

.minisite-masthead__meta .minisite-masthead__doi-value {
    color: var(--minisite-doi-value-color, #16202b);
    font-size: var(--minisite-doi-value-font-size, 13px);
    font-weight: var(--minisite-doi-value-font-weight, 600);
    margin-left: 4px;
}

/* Nav bar
   ========================================================================= */
.minisite-nav-bar {
    background: var(--minisite-nav-bg, #ffffff);
    border-top: 3px solid var(--minisite-accent-color, #0f6f6a);
    box-shadow: 0 1px 2px rgba(16, 26, 43, 0.05);
    font-family: var(--minisite-nav-font-family, inherit);
}

.minisite-nav-bar__inner {
    max-width: var(--minisite-header-footer-width, 1200px);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.minisite-nav-bar__cta {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px;
    background: var(--minisite-accent-color, #0f6f6a);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.minisite-nav-bar__cta:hover {
    opacity: 0.88;
}

/* Nav menu
   ========================================================================= */
.minisite-nav__menu {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.minisite-nav__menu a {
    display: inline-block;
    padding: 16px 0;
    color: var(--minisite-nav-link-color, #33404d);
    text-decoration: none;
    font-size: var(--minisite-nav-font-size, 14px);
    font-weight: var(--minisite-nav-font-weight, 600);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.minisite-nav__menu a:hover,
.minisite-nav__menu a:focus,
.minisite-nav__menu .current-menu-item > a {
    color: var(--minisite-accent-color, #0f6f6a);
    border-bottom-color: var(--minisite-accent-color, #0f6f6a);
}

/* Dropdown submenus
   wp_nav_menu() nests child items as <ul class="sub-menu"> inside the
   parent <li> — this makes that render as a floating dropdown instead of
   falling into normal document flow under the parent link. Desktop opens
   on hover/focus; minisite-nav.js adds a tap-to-open toggle for touch
   devices and turns this into an inline accordion on the mobile menu
   (see the max-width: 782px block below).
   ========================================================================= */
.minisite-nav__menu li {
    position: relative;
}

.minisite-nav__menu .minisite-nav__caret {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    vertical-align: middle;
}

.minisite-nav__menu li.minisite-nav__item--open > a .minisite-nav__caret,
.minisite-nav__menu li.minisite-nav__item--has-children:hover > a .minisite-nav__caret {
    transform: rotate(-135deg);
}

.minisite-nav__menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 220px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.08);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(16, 26, 43, 0.14);
}

.minisite-nav__menu .sub-menu .sub-menu {
    top: -9px;
    left: 100%;
}

.minisite-nav__menu li.minisite-nav__item--has-children:hover > .sub-menu,
.minisite-nav__menu li.minisite-nav__item--has-children:focus-within > .sub-menu,
.minisite-nav__menu li.minisite-nav__item--open > .sub-menu {
    display: block;
}

.minisite-nav__menu .sub-menu li {
    width: 100%;
}

.minisite-nav__menu .sub-menu a {
    display: block;
    width: 100%;
    padding: 10px 18px;
    border-bottom: none;
    white-space: nowrap;
}

.minisite-nav__menu .sub-menu a:hover,
.minisite-nav__menu .sub-menu a:focus {
    background: rgba(15, 111, 106, 0.08);
    border-bottom: none;
}

.minisite-nav__toggle-input {
    display: none;
}

.minisite-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    cursor: pointer;
}

.minisite-nav__toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--minisite-nav-link-color, #33404d);
}

/* Footer
   ========================================================================= */
.minisite-footer {
    margin-top: 48px;
    font-family: var(--minisite-footer-font-family, inherit);
}

.minisite-footer__main {
    background: var(--minisite-header-bg, #101a2b);
    color: var(--minisite-footer-text-color, #aab2bd);
}

.minisite-footer__inner {
    max-width: var(--minisite-header-footer-width, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

.minisite-footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    padding-top: 48px;
    padding-bottom: 48px;
}

.minisite-footer__brand-link {
    text-decoration: none;
}

.minisite-footer__brand-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--minisite-header-text-color, #ffffff);
}

.minisite-footer__logo-image {
    max-height: var(--minisite-footer-logo-max-height, 48px);
    max-width: var(--minisite-footer-logo-max-width, 200px);
    width: auto;
    display: block;
    margin: 0 0 12px;
}

.minisite-footer__brand-desc {
    margin: 0 0 8px;
    font-size: var(--minisite-footer-font-size, 13px);
    font-weight: var(--minisite-footer-font-weight, 400);
    line-height: 1.6;
}

.minisite-footer__meta-group {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.minisite-footer__meta-row {
    margin: 0 0 6px;
    font-family: var(--minisite-footer-font-family, inherit);
    font-size: var(--minisite-footer-font-size, 13px);
    font-weight: var(--minisite-footer-font-weight, 400);
    line-height: 1.5;
}

.minisite-footer__meta-label {
    font-family: var(--minisite-footer-font-family, inherit);
    font-weight: 700;
    opacity: 0.8;
    margin-right: 4px;
}

.minisite-footer__meta-value {
    font-family: var(--minisite-footer-font-family, inherit);
    font-weight: var(--minisite-footer-font-weight, 400);
}

.minisite-footer__col-title {
    margin: 0 0 14px;
    font-size: var(--minisite-footer-col-title-font-size, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--minisite-footer-col-title-color, #ffffff);
    opacity: 1;
}

.minisite-footer__links {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.minisite-footer__links a {
    color: var(--minisite-footer-text-color, #aab2bd);
    text-decoration: none;
    font-size: var(--minisite-footer-font-size, 13.5px);
    font-weight: var(--minisite-footer-font-weight, 400);
    transition: color 0.2s ease;
}

.minisite-footer__links a:hover {
    color: var(--minisite-header-text-color, #ffffff);
    text-decoration: underline;
}

.minisite-footer__contact {
    background: var(--minisite-header-bg, #101a2b);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.minisite-footer__contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: var(--minisite-footer-contact-font-size, 13px);
    font-weight: var(--minisite-footer-contact-font-weight, 400);
    color: var(--minisite-footer-contact-text-color, #aab2bd);
}

.minisite-footer__contact-item {
    color: inherit;
}

.minisite-footer__contact-label {
    font-weight: 700;
    margin-right: 4px;
}

.minisite-footer__contact-sep {
    opacity: 0.5;
}

.minisite-footer__contact-item a,
a.minisite-footer__contact-item {
    color: inherit;
    text-decoration: none;
}

a.minisite-footer__contact-item--link {
    font-weight: 700;
    text-decoration: underline;
}

.minisite-footer__contact-item a:hover,
a.minisite-footer__contact-item:hover {
    color: var(--minisite-accent-color, #0f6f6a);
    text-decoration: underline;
}

.minisite-footer__bottom {
    background: var(--minisite-header-bg, #101a2b);
}

.minisite-footer__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 14px;
    padding-bottom: 20px;
}

.minisite-footer__copy,
.minisite-footer__url {
    margin: 0;
    font-size: var(--minisite-footer-font-size, 12.5px);
    font-weight: var(--minisite-footer-font-weight, 400);
    color: var(--minisite-footer-text-color, #8a93a3);
}

.minisite-footer__url {
    opacity: 0.75;
}

/* Content
   ========================================================================= */

/* Body/paragraph font for the whole mini-site content area — set here,
   once, so it cascades to every element inside (paragraphs, lists, article
   cards, meta lines) instead of needing a font-family rule on each one. The
   fallback stack is the same "Mini Site Default" used when the setting is
   left blank — never the main theme's font. See minisite_font_choices(). */
.minisite-content {
    font-family: var(--minisite-content-body-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

/* Headings inside the content area override the body font above. Covers
   .minisite-content__title (an h1), post/article content headings, and
   card titles on the Editorial Board and Articles listings — they're all
   h1-h6 elements somewhere inside .minisite-content. */
.minisite-content h1,
.minisite-content h2,
.minisite-content h3,
.minisite-content h4,
.minisite-content h5,
.minisite-content h6 {
    font-family: var(--minisite-content-heading-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}

.minisite-content__inner {
    max-width: var(--minisite-content-width, 900px);
    margin: 0 auto;
    padding: 20px 24px;
}

.minisite-content__title {
    font-size: 32px;
    margin: 0 0 24px;
}

.minisite-content__body {
    font-size: 16px;
    line-height: 1.7;
}

/* Compact mobile header — Settings > Mini Site > Layout > Compact Mobile
   Header (on by default). Under 900px, strips the masthead down to just the
   logo, leaving the CTA + menu toggle in the nav bar below it, so the whole
   header runs about 120px tall instead of wrapping the eyebrow/tagline/DOI
   lines under the logo.
   ========================================================================= */
@media (max-width: 900px) {
    .minisite-header-compact .minisite-utility-bar,
    .minisite-header-compact .minisite-masthead__eyebrow,
    .minisite-header-compact .minisite-masthead__meta {
        display: none;
    }

    .minisite-header-compact .minisite-masthead__inner {
        padding: 14px 20px;
        justify-content: center;
    }

    /* Eyebrow/meta are hidden above, leaving .minisite-masthead__brand (the
       logo/title link) as the only child — center it instead of leaving it
       pinned left, which is where a lone flex item lands by default. */
    .minisite-header-compact .minisite-masthead__brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .minisite-header-compact .minisite-nav-bar__cta {
        margin: 8px 0;
        padding: 8px 16px;
    }
}

/* Mobile
   ========================================================================= */
@media (max-width: 900px) {
    .minisite-masthead__inner {
        align-items: flex-start;
    }

    .minisite-masthead__meta {
        text-align: left;
    }

    .minisite-nav__toggle {
        display: flex;
        order: 1;
    }

    /* The CTA has to come before .minisite-nav in source order for
       :checked ~ .minisite-nav to reach it, but that leaves it after the
       100%-wide (collapsed, 0-height) nav in flex layout — which pushes it
       onto its own line below the toggle instead of sitting beside it.
       `order` puts toggle + CTA together on the first flex line and keeps
       the full-width nav on the line after, whether expanded or not. */
    .minisite-nav-bar__cta {
        order: 2;
    }

    .minisite-nav {
        order: 3;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
    }

    .minisite-nav__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 0 16px;
    }

    .minisite-nav__menu a {
        padding: 8px 0;
    }

    .minisite-nav__toggle-input:checked ~ .minisite-nav {
        max-height: 80vh;
        overflow-y: auto;
    }

    /* Submenus become an inline accordion inside the off-canvas panel
       instead of a floating dropdown — a flyout has nowhere sensible to
       float to at this width. Toggled by minisite-nav.js tapping the
       parent link (same "is-open" class the desktop caret uses). */
    .minisite-nav__menu li {
        width: 100%;
    }

    .minisite-nav__menu .sub-menu {
        position: static;
        min-width: 0;
        margin: 4px 0 4px 16px;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .minisite-nav__menu .sub-menu .sub-menu {
        margin-left: 16px;
    }

    .minisite-nav__menu li.minisite-nav__item--has-children:hover > .sub-menu,
    .minisite-nav__menu li.minisite-nav__item--has-children:focus-within > .sub-menu {
        display: none;
    }

    .minisite-nav__menu li.minisite-nav__item--open > .sub-menu {
        display: block;
    }

    .minisite-nav__menu .sub-menu a {
        padding: 6px 0;
        font-size: 0.95em;
    }

    .minisite-footer__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Editorial Board archive grid
   ========================================================================= */

/* Masthead-style page title, scoped to this archive only (WP core adds
   .post-type-archive-editorial_board to <body> via body_class()). */
.post-type-archive-editorial_board .minisite-content__title {
    text-align: center;
    font-size: 34px;
    margin: 0 0 8px;
    color: var(--minisite-header-bg, #101a2b);
}

.post-type-archive-editorial_board .minisite-content__title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, #b8872b, #e0b563);
    border-radius: 2px;
}

.minisite-board-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.minisite-board-filter__item {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #101a2b;
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.15);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.minisite-board-filter__item:hover {
    border-color: rgba(184, 135, 43, 0.5);
}

.minisite-board-filter__item.is-active {
    color: #ffffff;
    background: linear-gradient(90deg, #b8872b, #e0b563);
    border-color: transparent;
}

.minisite-board-filter.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.minisite-board-grid {
    display: grid;
    /* Column count comes from Settings > Mini Site > Editorial Board > Board
       Members Per Row — minmax(0, 1fr) keeps cards from overflowing their
       track at high column counts on narrower desktops. */
    grid-template-columns: repeat(var(--minisite-board-per-row, 3), minmax(0, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.minisite-board-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.08);
    border-radius: 14px;
    padding: 32px 20px 26px;
    box-shadow: 0 2px 8px rgba(16, 26, 43, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.minisite-board-card__role-tag {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 12px;
    background: rgba(16, 26, 43, 0.06);
    color: var(--minisite-header-bg, #101a2b);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}

.minisite-board-card:hover,
.minisite-board-card:focus {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(16, 26, 43, 0.14);
    border-color: #b8872b;
}

.minisite-board-card__photo {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: #eef0f3;
    margin-bottom: 18px;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px rgba(16, 26, 43, 0.08);
}

.minisite-board-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.minisite-board-card__photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e9edf2, #dde2e8);
}

.minisite-board-card__body {
    width: 100%;
}

.minisite-board-card__name {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--minisite-header-bg, #101a2b);
}

.minisite-board-card__designation {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.minisite-board-card__company {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #8a5a11;
    background: rgba(184, 135, 43, 0.12);
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.minisite-board-card__department {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: fit-content;
    margin: 8px auto 0;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.12);
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.minisite-board-card__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.minisite-board-load-more {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.minisite-board-load-more__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: var(--minisite-accent-color, #0f6f6a);
    border: none;
    border-radius: 999px;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, opacity 0.2s ease;
}

.minisite-board-load-more__button:hover:not(:disabled) {
    background: var(--minisite-header-bg, #101a2b);
}

.minisite-board-load-more__button:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.minisite-board-load-more__spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    animation: minisite-board-load-more-spin 0.7s linear infinite;
}

.minisite-board-load-more__button.is-loading .minisite-board-load-more__spinner {
    display: inline-block;
}

@keyframes minisite-board-load-more-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Single board-member profile header via page-minisite.php
   ========================================================================= */

/* Wider column just for board-member pages, so a short bio doesn't sit lost
   in a narrow reading column. Other Mini Site pages keep the width from
   Settings > Mini Site as normal. */
body.single-editorial_board .minisite-content__inner {
    max-width: 1100px;
}

body.single-editorial_board .minisite-content__body {
    padding: 36px;
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16, 26, 43, 0.05);
}

body.single-editorial_board .minisite-content__body p {
    margin: 0 0 18px;
}

body.single-editorial_board .minisite-content__body p:last-child {
    margin-bottom: 0;
}

.minisite-board-profile {
    display: flex;
    align-items: center;
    gap: 32px;
    margin: 0 0 28px;
    padding: 36px;
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.08);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(16, 26, 43, 0.05);
}

.minisite-board-profile__role-tag {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 14px;
    background: rgba(16, 26, 43, 0.06);
    color: var(--minisite-header-bg, #101a2b);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 999px;
}

.minisite-board-profile__photo {
    width: 200px;
    height: 200px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 6px #ffffff, 0 0 0 7px rgba(16, 26, 43, 0.08), 0 12px 28px rgba(16, 26, 43, 0.12);
}

.minisite-board-profile__info {
    flex: 1;
    min-width: 0;
}

.minisite-board-profile__name {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 34px;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--minisite-header-bg, #101a2b);
}

.minisite-board-profile__designation {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.minisite-board-profile__company {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #8a5a11;
    background: rgba(184, 135, 43, 0.12);
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.minisite-board-profile__department {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin: 12px 0 0;
    padding: 5px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    background: rgba(29, 78, 216, 0.12);
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.minisite-board-profile__icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .minisite-board-profile {
        flex-direction: column;
        text-align: center;
        gap: 18px;
        padding: 24px;
    }

    body.single-editorial_board .minisite-content__body {
        padding: 24px;
    }

    .minisite-board-profile__department {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .minisite-board-profile__photo {
        width: 150px;
        height: 150px;
    }

    .minisite-board-profile__name {
        font-size: 26px;
    }
}

@media (max-width: 782px) {
    .post-type-archive-editorial_board .minisite-content__title {
        font-size: 26px;
    }

    .minisite-board-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 28px;
    }

    .minisite-board-card {
        padding: 24px 14px 20px;
    }

    .minisite-board-card__photo {
        width: 150px;
        height: 150px;
    }
}

@media (max-width: 480px) {
    .minisite-board-grid {
        grid-template-columns: 1fr;
    }
}

/* Articles
   ========================================================================= */
.minisite-article-meta,
.minisite-article-card__meta {
    color: rgba(16, 26, 43, 0.65);
    font-size: 14px;
    margin: 0 0 24px;
}

.minisite-article-card__meta {
    margin: 0 0 8px;
}

.minisite-article-meta a,
.minisite-article-card__meta a,
.minisite-article-topics a {
    color: inherit;
    text-decoration: underline;
}

.minisite-article-topics {
    color: rgba(16, 26, 43, 0.65);
    font-size: 14px;
    margin: -16px 0 24px;
}

.minisite-article-topics__label {
    font-weight: 600;
}

.minisite-content__thumbnail {
    margin: 0 0 32px;
}

.minisite-content__thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.minisite-article-list__intro {
    color: rgba(16, 26, 43, 0.7);
    margin: 0 0 32px;
}

.minisite-article-list {
    display: grid;
    /* Column count comes from Settings > Mini Site > Articles > Articles Per
       Row — minmax(0, 1fr) (rather than a fixed px minimum) keeps cards from
       overflowing their track at high column counts on narrower desktops. */
    grid-template-columns: repeat(var(--minisite-articles-per-row, 3), minmax(0, 1fr));
    gap: 32px;
}

.minisite-article-card {
    background: #ffffff;
    border: 1px solid rgba(16, 26, 43, 0.08);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16, 26, 43, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.minisite-article-card:hover,
.minisite-article-card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(16, 26, 43, 0.14);
    border-color: #b8872b;
}

.minisite-article-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.minisite-article-card__photo {
    aspect-ratio: 16 / 9;
    background: #eef0f3;
    overflow: hidden;
}

.minisite-article-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.minisite-article-card__body {
    padding: 20px 22px 24px;
}

.minisite-article-card__title {
    font-size: 19px;
    margin: 0 0 8px;
}

.minisite-article-card__excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(16, 26, 43, 0.75);
}

@media (max-width: 1000px) {
    .minisite-article-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px;
    }
}

@media (max-width: 600px) {
    .minisite-article-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}