/* An event's landing page — layout only; every component comes from foundation/components.css. */
/* Never wider than the screen: a phone's page must not slide sideways (each block already fits its
   column — the panel visual QA measures it on touch phones; this only keeps a stray one from moving the page). */
.event-page{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
#event-main{flex:1}
.event-state:not(:empty){padding-block:96px}
/* The server's reading of the page (event-snapshot.ts), for readers that run no script — the page
   and the quick form replace it as they start, so a browser never shows it; with scripts off it is the page. */
.page-snapshot{display:none}
@media (scripting:none){
  .page-snapshot{display:grid}
  .page-snapshot img{max-width:100%;height:auto}
  .loading-state:has(~ .page-snapshot){display:none}
}

/* Hero: the cover (square or upright) beside the title, who hosts and presents, the facts and the registration card. */
.event-hero{padding-block:48px 64px;overflow-x:clip}
.event-hero.aura::before,.event-hero.aura-motif::after{top:calc(-1 * var(--showcase-header-h))}
.event-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:start}
.event-cover-col{display:grid;gap:16px;min-width:0}
/* An upright cover is never taller than the screen allows: narrower instead, on the page's outer edge
   (centred once the hero is one column). */
.event-cover-col > .cover-wrap{width:min(100%,calc(var(--showcase-cover-max-h) * var(--cover-ratio,1)));justify-self:start}
/* With the instructors joined under it, the picture gives up their height: the card still fits the screen. */
.event-cover-col > .cover-wrap:has(> .media-credit:not([hidden])){width:min(100%,calc((var(--showcase-cover-max-h) - var(--media-credit-h)) * var(--cover-ratio,1)))}
/* The cover follows the reader only while it fits the screen. */
@media (min-height:780px){.event-cover-col{position:sticky;top:calc(var(--showcase-header-h) + 24px)}}
.event-intro{display:grid;gap:20px;min-width:0}
/* The subtitle sits close under the title it completes. */
.event-intro > .display-subtitle{margin-top:-10px}
.event-intro > .display-subtitle[hidden]{display:none}
.byline-list:not(:has(> .byline:not([hidden]))){display:none}
.event-register{display:grid;gap:16px;container-type:inline-size}
/* A narrow card (a phone): each ticket's name and price share its first line and the note takes the
   whole width under them — the note is no longer squeezed into a sliver beside the price. */
@container (max-width:400px){
  .event-register .option-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:12px;row-gap:2px}
  .event-register .option-card-copy{display:contents}
  .event-register .option-card > :is(.option-card-mark,.option-card-title,.price){grid-row:1}
  .event-register .option-card-note{grid-column:2 / -1}
}
.event-register-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.event-seats-left{display:inline-flex;align-items:center;gap:6px;color:var(--warning)}
.event-coupon{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.event-coupon-form{display:flex;gap:8px;width:100%}
.event-coupon-form .input{flex:1;min-width:0}
.event-coupon-price{display:inline-flex;align-items:baseline;margin-inline-start:auto}
.event-register-note{margin:0;font-size:var(--fs-sm);line-height:var(--lh-sm);color:var(--text-2)}
.event-sold-out-signin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px}

/* «ویدیوهای رویداد» above the hero, for a registrant whose ticket includes them. */
.event-videos{padding-block:32px 24px;scroll-margin-top:var(--showcase-header-h)}
.is-editing .event-videos{display:none}

/* Section links under the hero; a linked section lands just below them. */
.section-nav + .showcase-section{border-top:0}
#event-page > .showcase-section{scroll-margin-top:calc(var(--showcase-header-h) + var(--section-nav-h) - var(--showcase-section) + 24px)}

/* Content: one readable column. */
.event-content{max-width:calc(760px + 2 * var(--content-pad))}
/* «درباره رویداد» ends with the event's tags (and, while editing, the field that picks them). */
.event-tags{margin-top:24px}
.event-tags:empty{display:none}
.event-tags-edit{margin-top:24px}
/* «اسلایدر تصاویر و ویدیو»: right under «درباره رویداد», its title optional. */
.event-gallery-section .showcase-section-title[hidden]{display:none}
.event-gallery-section .showcase-section-title + .carousel{margin-top:4px}
.event-faq{display:grid}
.event-faq > .disclosure{padding-block:4px}
.event-faq > .disclosure + .disclosure{border-top:1px solid var(--line-1)}
/* Each question a full-width row between hairlines: the question at the start, its caret always at the end, a full touch target. */
.event-faq .disclosure > summary{display:flex;justify-content:space-between;min-height:44px;padding-block:10px;font-size:var(--fs-md);line-height:var(--lh-md)}
.event-faq .disclosure-caret{flex-shrink:0}
.event-faq .disclosure-body{padding-inline:12px;color:var(--text-2);white-space:pre-line}
.event-closing{border-top:0;padding-top:0}

.event-footer{padding-block:24px 32px;border-top:1px solid var(--line-1);color:var(--text-3);font-size:var(--fs-sm);line-height:var(--lh-sm)}
.event-footer-row{display:flex;align-items:center;justify-content:center;gap:6px}
.event-footer-mark{width:18px;height:18px}

@media (max-width:900px){
  .event-hero{padding-block:24px 40px}
  .event-hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .event-cover-col{position:static;max-width:440px;width:100%;justify-self:center}
  .event-cover-col > .cover-wrap{justify-self:center}
}
/* Phones: the bottom call (.sticky-cta) replaces the header button. */
@media (max-width:640px){.event-header-cta{display:none}}

/* ── Edit mode (editor.js) ── */
.event-about-edit{min-height:120px;white-space:pre-wrap}
/* «اسلایدر تصاویر و ویدیو» under the tags: the switch, then (on) its title, its items in order and «افزودن». */
.event-gallery-edit{display:grid;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line-1)}
.event-gallery-body{display:grid;gap:12px}
/* The slider's title and, at its left, «چرخش خودکار» (the switch level with the field). */
.event-gallery-head{display:flex;align-items:flex-start;gap:16px}
.event-gallery-head > .field:first-child{flex:1;min-width:0}
.event-gallery-turn{flex-shrink:0}
.event-gallery-turn-row{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.event-gallery-turn-row > .field-hint{margin:0;white-space:nowrap}
.event-gallery-body[hidden],.event-gallery-list[hidden],.event-gallery-empty[hidden]{display:none}
.event-gallery-empty{margin:0}
.event-gallery-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.event-gallery-item{align-items:center;gap:12px;padding:8px 10px}
.event-gallery-copy{display:grid;flex:1;min-width:0;gap:2px}
.event-gallery-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
/* The players' and pictures' previews in their dialogs. */
.event-video-input{min-height:88px}
.event-video-preview,.event-image-preview{margin-top:12px}
.event-video-preview[hidden],.event-image-preview[hidden]{display:none}
.event-image-preview{display:grid;place-items:center;padding:8px;border-radius:var(--r-lg);background:var(--surface-2)}
.event-image-preview > img{display:block;max-width:100%;max-height:240px}
/* The rich editor's tools stay under the header and the section links while its text scrolls. */
#w-about-section .rich-text-toolbar{top:calc(var(--showcase-header-h) + var(--section-nav-h))}
.event-faq-edit{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.event-faq-fields{display:grid;gap:20px;flex:1;min-width:0}
.event-faq-edit > .editable-tools{flex-direction:column;margin-top:-4px}
.event-faq-live{display:flex;align-items:center;gap:6px;margin:-8px 0 0}
.event-faq-q{font-weight:600;color:var(--text-1)}
.event-faq-a{min-height:24px;white-space:pre-wrap;color:var(--text-2)}
.is-editing .event-cover-col .cover-frame{cursor:pointer}
.editable-add{margin-top:12px}
/* «بلیت‌ها و کد تخفیف»: one compact row per item; a compact form opens in its place. */
.event-list{display:grid;gap:8px}
.event-list-row{display:flex;align-items:center;gap:12px;padding:10px 12px}
.event-list-row.is-muted{opacity:.6}
.event-list-row-main{display:grid;flex:1;min-width:0}
.event-list-row-main > .cell-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-list-row-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.event-list-add{margin-top:12px}
#wc-form-host:not(:empty){margin-top:8px}
.event-edit-form{display:grid;gap:14px;padding:14px 16px}
.event-edit-form-head{display:flex;align-items:center;gap:12px}
.event-edit-form .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.event-edit-form .field-error:empty{display:none}
.coupon-amount{display:flex;align-items:center;gap:8px}
.coupon-amount > .input{flex:1;min-width:0}
.coupon-amount > .segmented{flex-shrink:0}
@media (max-width:640px){
  .event-list-row-main > .cell-sub{white-space:normal}
  .event-edit-form .form-grid{grid-template-columns:minmax(0,1fr)}
}

/* «اطلاعات» → «فرم ثبت‌نام سریع»: the form's address with its copy, «پیش‌نمایش فرم» beside it (under it on a phone). */
.event-quick-address{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.event-quick-address > .copy-value{flex:1 1 220px;min-width:0}

/* ── Registration (register.js) ── */
.event-form{gap:10px}
.event-done{display:flex;align-items:center;gap:12px}
.event-done-copy{display:grid;gap:2px;min-width:0}
.event-ics{justify-self:center}
.event-calendar{display:grid;gap:4px}
/* «دعوت از دوستان» (invite.js): the link and its buttons, the banner and its buttons, the figures. */
.event-invite{display:grid;gap:16px;scroll-margin-top:calc(var(--showcase-header-h) + 16px)}
.event-invite-block{display:grid;gap:10px}
.event-invite-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.event-invite-tools{display:flex;align-items:center;gap:4px}
.event-invite .banner-frame,.event-invite-coach{width:100%;max-width:440px;justify-self:center}
/* A group ticket: the team size and its price on the open card, then the buyer's slots after paying. */
.event-group-pick{display:grid;gap:12px}
.event-group-pick-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.event-group-slot{display:grid;gap:6px}
.event-group-slot > .field-error:empty{display:none}
.event-group-sms{flex-shrink:0}
/* The editor's price table for a group: scrolls instead of growing the dialog. */
.event-tiers{max-height:280px;overflow:auto}
.event-tiers td{height:auto}
/* A group ticket's buyer and the people they add. */
.event-group{display:grid;gap:10px}
.event-group-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.event-group-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.event-group-person{display:flex;align-items:center;gap:10px;min-width:0}
.event-group-copy{display:grid;flex:1;min-width:0}
.event-group-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px}
@media (max-width:520px){.event-group-form{grid-template-columns:minmax(0,1fr)}}

/* ── Focus view: after paying or registering with a questionnaire to answer, only that ──
   The page (hero, sections, closing call), the header's and the bar's calls and the footer
   step aside; the notice and the questionnaire's box stand alone, centred on a tall screen. */
body.is-focused #event-page,
body.is-focused .event-header-cta,
body.is-focused .sticky-cta,
body.is-focused .event-footer{display:none}
.focus-view{display:grid;justify-items:center;align-content:start;min-height:calc(100dvh - var(--showcase-header-h));padding:24px 16px 48px}
.focus-view:focus{outline:none}
.focus-view[hidden]{display:none}
.focus-stack{display:grid;gap:16px;width:min(520px,100%)}
.focus-card{padding:20px}
.focus-stack > [hidden],#wf-done:empty{display:none}
.focus-actions{display:flex;justify-content:center}
/* Live or minutes away: the way in, centred — «ثبت‌نام شما کامل شد», when it starts, the button, the count down. */
.focus-enter{display:grid;justify-items:center;gap:16px;text-align:center}
.focus-enter-copy{display:grid;gap:6px}
.focus-enter-when{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:var(--fs-md);line-height:var(--lh-md);color:var(--text-2)}
.focus-enter-auto{width:100%}
.focus-enter-auto:empty{display:none}
/* Later: the card's frame steps aside and each part is a box of its own, one under another. */
.event-register.focus-boxes{gap:16px}
.focus-box{display:grid;gap:16px}
.focus-box > .card-section{display:grid;gap:16px}
.focus-box > .card-section + .card-section{margin-top:0}
@media (min-width:640px){
  .focus-view{align-content:center;padding-block:48px}
  .focus-card,#wf-done > .event-register:not(.focus-boxes),.focus-box{padding:28px}
}
/* A tall page of boxes starts at the top rather than centred past the screen's edge. */
.focus-view:has(.focus-boxes){align-content:start}
/* Back on the page after the last answer: the registration card lands under the header, not behind it. */
.event-register{scroll-margin-top:calc(var(--showcase-header-h) + 16px)}