/* ========================================================= */
/* WORKSHOP PAGE (visitor-workshop.php)                       */
/* Page-exclusive rules only — shared tokens/components       */
/* (.section, .section-header, .as-pillar-grid/card,          */
/* .as-cta-bar, .form-card/.form-row/.input-group/.form-      */
/* control, .site-cta-btn, .privacy-text, .gdpr-text) all      */
/* come from css/common.css, per brain.md's CSS split rule.    */
/* ========================================================= */

/* --- Why Register? benefits list --- */
/* Left-aligned, no auto-centering -- matches the left-aligned
   .section-header heading/paragraph immediately above it (default
   sitewide section-heading alignment per design-tokens.md; centering
   this list on its own narrower measure while the heading above it
   stays left-aligned would visually disagree with it). */
.ws-benefits-list {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ws-benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1rem;
    color: var(--text-dark);
    line-height: 1.6;
}

.ws-benefit-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--grad-main);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-top: 2px;
}

.ws-benefit-icon svg { width: 16px; height: 16px; }

/* --- Featured Workshops cards: "Ideal for" tag line --- */
.ws-ideal-for {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #edf0f6;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.6;
}

.ws-ideal-for strong { color: var(--text-dark); }

/* 7 workshop cards in the shared 3-col (then 2-col, then 1-col)
   .as-pillar-grid don't divide evenly -- the 7th card would otherwise
   land alone at the start of its own row with a large empty gap beside
   it. Spanning the full row width and re-centering it as a normal-width
   card fixes this at both the 3-col and 2-col breakpoints; reset back to
   a plain full-width card at the 1-col mobile breakpoint below, where
   every card (including this one) already stacks full-width and the
   "orphan row" problem doesn't exist. */
#ws-featured .as-pillar-grid > .as-pillar-card:last-child {
    grid-column: 1 / -1;
    max-width: 420px;
    margin-inline: auto;
}

/* --- Limited Seats / Certificate highlight banner --- */
/* Plain neutral border (matches .as-pillar-card) + a solid gradient top
   bar via ::before -- border-image doesn't respect border-radius, so a
   full-perimeter gradient border would square off this box's rounded
   corners; a positioned top bar gets the same brand-gradient accent
   without that conflict. */
.ws-highlight-banner {
    position: relative;
    margin-top: 40px;
    padding: 34px 36px 30px;
    border-radius: 18px;
    background: #ffffff;
    border: 1.5px solid #edf0f6;
    overflow: hidden;
    text-align: center;
}

.ws-highlight-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--grad-main);
}

.ws-highlight-eyebrow {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-red);
    margin-bottom: 10px;
}

.ws-highlight-banner p:last-child {
    font-size: 1rem;
    color: var(--text-dark);
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.7;
}

/* --- Registration form --- */
.ws-form-wrap {
    max-width: 820px;
    margin: 0 auto;
}

/* Same .form-card shell Register_EGN.php uses, but with the brand-blue
   accent (this page's registration is workshop-specific, not the red-
   accented general visitor form) so the two forms read as distinct. */
.ws-form-card {
    border-left-color: var(--brand-blue);
}

.ws-optional-note {
    font-weight: 400;
    color: var(--text-light);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.85rem;
}

/* 2-column checkbox grid for "Workshop Preference (select one or more)" —
   same visual language as Register_EGN.php's .radio-options-grid, but
   scoped to this page since that class/markup lives in that page's own
   inline <style>, not common.css. */
.ws-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 10px;
    background: #fdfdfd;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 8px;
}

.ws-checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: #444;
    cursor: pointer;
    line-height: 1.4;
}

.ws-checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--brand-blue);
    cursor: pointer;
}

.ws-consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.required-star { color: var(--brand-red); }

@media (max-width: 768px) {
    .ws-checkbox-grid { grid-template-columns: 1fr; }
    .ws-highlight-banner { padding: 26px 22px; }
}

@media (max-width: 600px) {
    .ws-benefits-list li { font-size: 0.95rem; }
}