/* ========================================================= */
/* 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.    */
/* ========================================================= */

/* --- Hero h1 --- */
/* "Hands-On Educators' Workshops" is longer than every other page's
   .policy-page-intro h1 sitewide and wraps to 2 lines on common desktop
   widths (~1120px+, where the shared h1 rule's clamp() hits its 2.8rem
   ceiling but .policy-page-intro's own 860px max-width caps available
   space) — added 2026-09-14 to keep it on one line. Lower clamp ceiling
   + nowrap keeps it single-line from desktop down through tablet;
   re-allows wrap at narrow mobile (matching common.css's own
   .conference-hero-heading fallback pattern) since nowrap's fixed floor
   would otherwise force illegibly small text to fit 29 characters into
   a ~360px mobile viewport. */
.ws-hero-heading {
    white-space: nowrap;
    font-size: clamp(1.5rem, 4.4vw, 2.4rem);
}

@media (max-width: 480px) {
    .ws-hero-heading {
        white-space: normal;
        font-size: 1.6rem;
    }
}

/* --- Featured Workshops: slim icon cards (redesigned 2026-09-14) --- */
/* Horizontal icon+text layout, modeled on common.css's .pa-card (icon +
   label, no long body paragraph) rather than the taller, justified-
   paragraph .as-pillar-card this grid used before — deliberately slimmer
   per request. Reuses .as-pillar-grid for the already-wired responsive
   3/2/1-column grid; .ws-workshop-grid only tightens its gap. */
.ws-workshop-grid { gap: 18px; }

.ws-workshop-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 22px 22px 20px;
    box-shadow: var(--shadow-card);
    border: 1.5px solid #edf0f6;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.ws-workshop-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--grad-main);
    border-radius: 3px 0 0 3px;
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}

.ws-workshop-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 20px 44px rgba(0, 0, 0, 0.09);
    border-color: rgba(20, 83, 188, 0.18);
}

.ws-workshop-card:hover::before { transform: scaleY(1); }

.ws-workshop-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.ws-workshop-card:hover .ws-workshop-icon { transform: scale(1.08); }

.ws-workshop-icon svg { width: 22px; height: 22px; }

/* Same 3-colour brand cycle as .pa-card-icon/.as-pillar-icon elsewhere */
.ws-wi--blue   { background: rgba(20, 83, 188, 0.09); }
.ws-wi--purple { background: rgba(130, 41, 102, 0.09); }
.ws-wi--red    { background: rgba(213, 16, 36, 0.09); }
.ws-wi--blue   svg { stroke: var(--brand-blue); }
.ws-wi--purple svg { stroke: var(--brand-purple); }
.ws-wi--red    svg { stroke: var(--brand-red); }

.ws-workshop-text { min-width: 0; }

.ws-workshop-num {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--brand-purple);
    margin-bottom: 4px;
}

.ws-workshop-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 6px;
    line-height: 1.3;
    transition: color 0.25s ease;
}

.ws-workshop-card:hover h3 { color: var(--brand-blue); }

.ws-workshop-card p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text-gray);
    margin: 0;
    text-align: left;
}

/* --- Hero photo, beside the H1 (added 2026-09-14) --- */
/* .policy-page-intro.k12-wrapper (common.css) is the existing shared
   mechanism for pairing this heading block with a side image -- same
   flex row + wrap-to-stacked-on-narrow-screens behaviour the 6 sector
   agenda pages already use for their .theme-partner-logo-card. Unlike
   that small fixed-size logo card, this is a real photo: flex-basis
   sized generously but with no flex-grow, so .policy-page-intro-text
   (flex:1 1 320px, grows) keeps most of the width and the heading has
   as much room as it did in the old single-column layout -- the
   .ws-hero-heading nowrap/clamp sizing below was calibrated against
   that same ~788px effective column width, so it still applies. */
.ws-hero-image { flex: 0 1 420px; }

.ws-hero-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
    object-fit: cover;
}

/* Featured Workshops heading centered per request (2026-09-14) --
   overrides the sitewide .section-header default of left-aligned/
   max-width:860px (common.css) the same way #explore-tracks and
   #media-partners already do on index.php. */
#ws-featured .section-header {
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#ws-featured .section-header h2 { text-align: center; }

#ws-featured .section-header p {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: 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 heading/paragraph centered per request (2026-09-14) --
   same override pattern as #ws-featured .section-header above. */
#ws-register > .section-header {
    text-align: center;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#ws-register > .section-header h2 { text-align: center; }

#ws-register > .section-header p {
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

/* --- 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; }
}