/* ============================================================
   section-header.css — sub-section header within a day
   ============================================================ */

.darom-section-head {
    --accent: #c5984e;
    margin: 56px 0 32px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-block);              /* 24px — Figma event-hero stack gap */
    align-items: flex-start;
    text-align: right;
}
.darom-section-head[style*="text-align: center"] {
    align-items: center;
}
/* In a centered wordmark section the wordmark itself stays centered, but the
   text rows under it (subtitle, meta, location) hug the right edge per RTL
   convention, with extra breathing room above the first text row. */
.darom-section-head--wordmark[style*="text-align: center"] .darom-section-subtitle,
.darom-section-head--wordmark[style*="text-align: center"] .darom-section-meta {
    align-self: stretch;
    text-align: right;
}
.darom-section-head--wordmark[style*="text-align: center"] .darom-section-location {
    align-self: flex-start;   /* RTL column → flex-start is the right edge */
    text-align: right;
}
.darom-section-head--wordmark[style*="text-align: center"] .darom-section-subtitle {
    margin-top: 32px;
}
.darom-section-wordmark {
    height: 88px;
    width: auto;
    max-width: 100%;
    display: block;
}
.darom-section-title {
    margin: 0;
    font-size: var(--t-h3);            /* 43px */
    line-height: var(--t-h3-lh);
    font-weight: 500;
    color: var(--accent);
    letter-spacing: -1px;
}
.darom-section-subtitle {
    margin: 0;
    font-size: var(--t-h5);            /* 28px */
    line-height: var(--t-h5-lh);
    font-weight: 400;
    color: var(--accent);
    letter-spacing: -1px;
}
.darom-section-meta {
    margin: 0;
    font-size: var(--t-pL);            /* 18px */
    line-height: var(--t-pL-lh);
    color: var(--c-ink-soft);
}
.darom-section-location {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-h5);            /* 28px Bold per Figma */
    line-height: var(--t-h5-lh);
    color: var(--accent);
    font-weight: 700;
    letter-spacing: -1px;
}
.darom-section-hours {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--t-pL);            /* 18px regular */
    line-height: var(--t-pL-lh);
    color: var(--c-ink-soft);
    font-weight: 400;
}
/* Numeric ranges in Hebrew flow need LTR isolation so digits don't reverse. */
.darom-section-hours-time {
    direction: ltr;
    unicode-bidi: isolate;
}

/* When a wordmark is shown the subtitle/meta/location bump up one notch
   (the wordmark plays the brand-mark role, the subtitle becomes the H3). */
.darom-section-head--wordmark .darom-section-subtitle {
    font-size: var(--t-h3);            /* 43px */
    line-height: var(--t-h3-lh);
    font-weight: 500;
}
.darom-section-head--wordmark .darom-section-meta {
    font-size: var(--t-h5);            /* 28px */
    line-height: var(--t-h5-lh);
    /* meta inside a wordmark section stays dark (kids "הצגות..." + youth "ערב מוגזם"). */
    color: var(--c-ink-soft);
}
.darom-section-head--wordmark .darom-section-location {
    font-size: var(--t-h5);            /* 28px */
    line-height: var(--t-h5-lh);
    font-weight: 700;
}

/* Tourism (.darom-section--maroon): the partner-credits "meta" line below
   the H3 subtitle is rendered in maroon to match Figma 6003:5334.
   The accent on the section-head element is already #501721, so the meta
   simply inherits via --accent. */
.darom-section--maroon .darom-section-head .darom-section-meta { color: var(--accent); }

@media (max-width: 760px) {
    .darom-section-head { margin: 32px 0 16px; gap: 14px; }
    .darom-section-wordmark { height: 65px; }
    .darom-section-title { font-size: 30px; line-height: 32px; }
    .darom-section-subtitle { font-size: 20px; line-height: 26px; }
    .darom-section-meta { font-size: 16px; line-height: 24px; }
    .darom-section-location { font-size: 17px; line-height: 24px; }
    .darom-section-location svg { width: 14px; height: 17px; }
    .darom-section-hours { font-size: 14px; line-height: 22px; }
    .darom-section-hours svg { width: 14px; height: 14px; }

    /* Wordmark variant on mobile: subtitle still h3-ish, meta still h5-ish. */
    .darom-section-head--wordmark .darom-section-subtitle { font-size: 28px; line-height: 32px; }
    .darom-section-head--wordmark .darom-section-meta { font-size: 20px; line-height: 26px; }
    .darom-section-head--wordmark .darom-section-location { font-size: 20px; line-height: 26px; }
}