/*!
 * True Makeup Theme — Makeup Artists page
 *
 * Styles for the /makeup-artists/ landing page. The page is a stack
 * of editorial split panels, one per `tmt_artists` post, alternating
 * image-left / image-right with the `--flip` modifier. Each panel
 * carries a two-marker header line (numbered index + role label),
 * a full-width divider, the artist name, and a short bio.
 *
 * An empty-state card covers the case where no artist posts have
 * been published yet.
 */

.tmt-mua-page                  { background: #fff; padding: 70px 0 80px; }
.tmt-mua-page__inner           { max-width: var(--layout-max-width, 1700px); margin: 0 auto; }

/* -------- Hero strip -------------------------------------------- */

.tmt-mua-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    margin-bottom: 40px;
    background: #F4F4F5;
    background-size: cover;
    background-position: center;
}
.tmt-mua-hero__title {
    font-family: var(--font-secondary);
    font-size: 40px;
    font-weight: 400;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}
.tmt-mua-hero__desc {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 12px 0 0;
    line-height: 1.6;
}

/* -------- Artist split panels ----------------------------------- */

.tmt-mua-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-height: 500px;
    margin-bottom: 8px;
}
.tmt-mua-panel--flip .tmt-mua-panel__media { order: 2; }
.tmt-mua-panel--flip .tmt-mua-panel__body  { order: 1; }

.tmt-mua-panel__media {
    position: relative;
    overflow: hidden;
    background: #F4F4F5;
}
.tmt-mua-panel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmt-mua-panel__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
}

/* -------- Marker line + divider --------------------------------- */

.tmt-mua-panel__markers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    max-width: 440px;
}
.tmt-mua-panel__markers-lhs {
    font-family: var(--font-secondary);
    font-size: 13px;
    font-style: italic;
    color: #000;
}
.tmt-mua-panel__markers-rhs {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #000;
}
.tmt-mua-panel__rule {
    height: 1px;
    background: #000;
    margin: 0 0 32px;
    max-width: 440px;
}

.tmt-mua-panel__name {
    font-family: var(--font-secondary);
    font-size: 44px;
    font-weight: 400;
    color: #000;
    margin: 0 0 24px;
    line-height: 1.08;
}
.tmt-mua-panel__bio {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.7;
    color: #000;
    margin: 0;
    max-width: 440px;
}

/* -------- Empty state ------------------------------------------- */

.tmt-mua-empty {
    background: #F4F4F5;
    padding: 64px 48px;
    text-align: center;
}
.tmt-mua-empty h3 {
    font-family: var(--font-secondary);
    font-size: 28px;
    font-weight: 400;
    color: #000;
    margin: 0 0 12px;
}
.tmt-mua-empty p {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 0;
    line-height: 1.6;
}

/* -------- Mobile ------------------------------------------------ */

@media (max-width: 1023px) {
    /* Tighten the top gap between the masthead and the hero strip
       on mobile — same trim as contact-page.css and faq-page.css. */
    .tmt-mua-page          { padding: 24px 0 48px; }
    .tmt-mua-hero          { padding: 32px 24px; margin-bottom: 24px; }
    .tmt-mua-hero__title   { font-size: 28px; }

    .tmt-mua-panel                     { grid-template-columns: 1fr; min-height: 0; }
    /* Image-first stacking regardless of flip. */
    .tmt-mua-panel--flip .tmt-mua-panel__media { order: 0; }
    .tmt-mua-panel--flip .tmt-mua-panel__body  { order: 1; }
    .tmt-mua-panel__media              { aspect-ratio: 4 / 3; }
    .tmt-mua-panel__body               { padding: 32px 24px; }
    .tmt-mua-panel__markers,
    .tmt-mua-panel__rule,
    .tmt-mua-panel__bio                { max-width: 100%; }
    .tmt-mua-panel__name               { font-size: 28px; }
}