/* ═══════════════════════════════════════════════════
   HUB.CSS
   Home page only: video opening band, chooser, program rows,
   mentorship application
═══════════════════════════════════════════════════ */

/* ── Opening: the video's own "Art speaks" caption sits at mid-screen;
   the words start right under it ── */
.opening {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100svh;
  color: var(--color-band-text);
  text-align: center;
}

/* Keeps the title readable over any frame */
.opening__veil {
  position: absolute;
  inset: 0;
  /* darkens only the lower half, where the words are; the caption above stays clear */
  /* must reach fully transparent at the bottom edge, or it shows as a seam above the sheet */
  background: linear-gradient(to top, transparent 0%, rgba(20, 18, 16, 0.45) 12%, rgba(20, 18, 16, 0.5) 25%, rgba(20, 18, 16, 0.4) 45%, transparent 55%);
  pointer-events: none;
}

.opening__studio {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1;
  margin: 0;
  padding: var(--space-5) var(--gutter);
  color: var(--color-band-muted);
}

.opening__inner {
  position: relative;
  width: 100%;
  /* The caption is burned into the video at its exact vertical centre. The video
     covers the screen at a scale of max(width/720, height/1280), and the caption
     is about 60px tall in the 720×1280 frame: start just below its lower edge. */
  --video-scale: max(100vw / 720, 100vh / 1280);
  padding-top: calc(50vh + var(--video-scale) * 32 + var(--space-3));
  padding-bottom: var(--space-5);
}

/* The words share the lower half of the screen with nothing else, so they run compact */
.opening__title {
  font-size: clamp(52px, min(12vw, 10vh), 84px);
  line-height: 1.05;
  margin-bottom: var(--space-2);
}

.opening__lead {
  max-width: min(54ch, 100%);
  margin-inline: auto;
  margin-bottom: var(--space-2);
  line-height: 1.6;
}

.opening__mood {
  max-width: min(54ch, 100%);
  margin-inline: auto;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-band-muted);
  margin-bottom: var(--space-5);
}

.opening__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.opening :focus-visible {
  box-shadow: 0 0 0 2px var(--color-band), 0 0 0 4px var(--color-band-text);
}

/* ── Video controls: icon buttons in the top-right corner ── */
.video-controls {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: calc(var(--gutter) - var(--space-2));
  z-index: 2;
  display: flex;
  gap: var(--space-1);
}

/* "להפעלת המוזיקה": a quiet pill beside the speaker while the browser holds the sound back */
.sound-hint {
  align-self: center;
  min-height: 34px;
  padding: 0 var(--space-4);
  background-color: rgba(24, 19, 15, 0.35);
  border: 1px solid var(--color-band-line);
  border-radius: 999px;
  color: var(--color-band-text);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  animation: hint-in 900ms var(--ease-out) 600ms both;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (hover: hover) {
  .sound-hint:hover {
    background-color: rgba(24, 19, 15, 0.55);
    border-color: var(--color-band-text);
  }
}

.video-control {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-band-text);
  transition: background-color var(--transition-base);
}

.video-control__icon {
  width: 22px;
  height: 22px;
}

.icon-speaker,
.icon-pause,
.icon-play {
  fill: currentColor;
}

.icon-waves,
.icon-muted {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* Muted: speaker with an ×. Sound on: speaker with waves. */
.icon-waves,
.video-control.is-on .icon-muted {
  display: none;
}

.video-control.is-on .icon-waves {
  display: inline;
}

/* Playing: pause bars. Paused: play triangle. */
.icon-play,
.video-control.is-paused .icon-pause {
  display: none;
}

.video-control.is-paused .icon-play {
  display: inline;
}

@media (hover: hover) {
  .video-control:hover { background-color: rgba(250, 246, 239, 0.14); }
}

/* ── Moments: photos from the first evening ── */
.moments {
  padding-bottom: var(--space-8);
}

.moments__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* the first print lines up with the text column above it */
  --strip-inset: max(var(--gutter), calc((100% - var(--column)) / 2));
  scroll-padding-inline: var(--strip-inset);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.moments__track::-webkit-scrollbar {
  display: none;
}

.moments__track:focus-visible {
  box-shadow: inset var(--focus-ring);
}

.moments__list {
  display: flex;
  gap: var(--space-6);
  width: max-content;
  /* room below for the prints' shadows, which the scroll box would otherwise clip */
  padding: var(--space-5) var(--strip-inset) var(--space-8);
}

.moments__list li {
  width: clamp(200px, 62vw, 250px);
  scroll-snap-align: start;
}

/* Laid down by hand: each print sits at its own slight angle */
.moments__list li:nth-child(odd) .photo  { transform: rotate(-1.6deg); }
.moments__list li:nth-child(even) .photo { transform: rotate(1.2deg) translateY(10px); }
.moments__list li:nth-child(3n) .photo   { transform: rotate(-0.6deg) translateY(-4px); }

@media (hover: hover) {
  .moments__list li:nth-child(n) .photo:hover { transform: rotate(0) translateY(-4px); }
}

.moments__nav {
  margin-top: calc(-1 * var(--space-6));
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.moments__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--color-sand-line);
  border-radius: 50%;
  color: var(--color-umber);
  transition: background-color var(--transition-base), opacity var(--transition-base);
}

.moments__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.moments__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (hover: hover) {
  .moments__btn:not(:disabled):hover { background-color: var(--color-panel); }
}

/* ── About: Noa's photo beside her words ── */
.about__layout {
  display: grid;
  gap: var(--space-7);
  justify-items: center;
}

.about__photo {
  width: min(240px, 70%);
  transform: rotate(1.8deg);
}

@media (min-width: 760px) {
  .about .about__layout {
    max-width: calc(var(--column) + 300px + 2 * var(--gutter));
    grid-template-columns: 240px 1fr;
    align-items: center;
    justify-items: stretch;
    gap: var(--space-8);
  }

  .about__photo { width: 100%; }
}

/* ── Chooser: the axis, as links, on a beige panel ── */
.section.choose {
  margin-top: var(--space-9);
  padding-block: var(--space-8);
  background-color: var(--color-panel);
}

.chooser li {
  max-width: 32ch;
}

.chooser a {
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--color-sand-line);
  text-underline-offset: 7px;
  transition: color var(--transition-base), text-decoration-color var(--transition-base);
}

@media (hover: hover) {
  .chooser a:hover {
    color: var(--color-ink);
    text-decoration-color: var(--color-umber);
  }
}

.chooser li + li::before {
  height: 36px;
  margin-block: var(--space-3);
  background: linear-gradient(to bottom, transparent, var(--color-umber) 30%, var(--color-umber) 70%, transparent);
}

#program {
  padding-top: var(--space-9);
}

/* ── Open evenings: one small invitation each ── */
.invites {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-7);
}

/* The program section widens to hold two invitations side by side */
#program .column {
  max-width: calc(var(--wide) + 2 * var(--gutter));
}

#program .section-title {
  max-width: var(--column);
}

/* Each evening is a printed invitation: card stock, a thin inner frame,
   laid down at a slight angle like the photos above */
.invite {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px;
  background-color: var(--color-card);
  background-image: var(--paper-grain);
  box-shadow: 0 1px 2px rgba(43, 35, 29, 0.10), 0 16px 36px rgba(43, 35, 29, 0.13);
  text-align: center;
  scroll-margin-top: var(--space-5);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}

.invites > :nth-child(odd)  { transform: rotate(-0.6deg); }
.invites > :nth-child(even) { transform: rotate(0.5deg) translateY(8px); }

.invite__frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid var(--color-sand-line);
}

.invite__title {
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  padding: var(--space-7) var(--space-5) var(--space-2);
}

.invite__link {
  text-decoration: none;
}

/* The whole invitation is the link target */
.invite__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.invite__audience {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-umber);
  padding-inline: var(--space-5);
}

.invite__rule {
  width: 40px;
  height: 1px;
  margin: var(--space-5) auto;
  border: 0;
  background-color: var(--color-gold);
}

.invite__desc {
  max-width: 34ch;
  margin-inline: auto;
  padding-inline: var(--space-5);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-6);
}

.invite__facts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: auto var(--space-5) var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-sand-line);
}

.invite__fact dt {
  font-size: var(--text-xs);
  color: var(--color-muted);
  line-height: 1.6;
}

.invite__fact dd {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
}

/* The booking line, framed like the RSVP at the foot of a printed card */
.invite__cta {
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  font-weight: 600;
  transition: background-color var(--transition-base), color var(--transition-base);
}

@media (hover: hover) {
  .invites > .invite:hover {
    transform: rotate(0) translateY(-4px);
    box-shadow: 0 1px 2px rgba(43, 35, 29, 0.10), 0 22px 44px rgba(43, 35, 29, 0.18);
  }
  .invite:hover .invite__cta {
    background-color: var(--color-ink);
    color: var(--color-paper);
  }
}

.invite:has(.invite__link:focus-visible) {
  box-shadow: var(--focus-ring);
}

.invite__link:focus-visible {
  box-shadow: none;
}

/* Chosen from "מה מתאים לי?": a brief gold outline so the eye lands */
.invite.is-chosen,
.soon__item.is-chosen {
  animation: chosen 1.6s var(--ease-out);
}

@keyframes chosen {
  0%, 40% { box-shadow: 0 0 0 2px var(--color-gold); }
  100%    { box-shadow: 0 0 0 2px transparent; }
}

/* ── Coming soon: quieter, grouped in the beige panel ── */
.soon {
  margin-top: var(--space-8);
  background-color: var(--color-panel);
  padding: var(--space-7) var(--space-6) var(--space-5);
}

.soon__heading {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.soon__intro {
  font-style: italic;
  color: var(--color-muted);
  margin-bottom: var(--space-5);
}

.soon__item {
  border-top: 1px solid var(--color-sand-line);
  scroll-margin-top: var(--space-5);
}

.soon__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding-block: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.soon__summary::-webkit-details-marker {
  display: none;
}

.soon__head {
  display: grid;
}

.soon__title {
  font-size: var(--text-md);
  line-height: 1.35;
}

.soon__meta {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-muted);
}

.soon__icon {
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background:
    linear-gradient(var(--color-ink), var(--color-ink)) center / 100% 1px no-repeat,
    linear-gradient(var(--color-ink), var(--color-ink)) center / 1px 100% no-repeat;
  transition: transform var(--transition-base);
}

.soon__item[open] .soon__icon {
  transform: rotate(45deg);
}

@media (hover: hover) {
  .soon__summary:hover .soon__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

.soon__body {
  padding-bottom: var(--space-6);
}

.soon__item[open] .soon__body {
  animation: rise 360ms var(--ease-out);
}

.soon__desc {
  color: var(--color-ink-soft);
  margin-bottom: var(--space-4);
}

.soon__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.soon__link {
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Mentorship application ── */
.apply {
  width: 100%;
  padding-top: var(--space-2);
}

.apply__intro {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-style: italic;
  margin-bottom: var(--space-5);
}

.field {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.field__control {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: 2px;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-input);
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--transition-base);
}

@media (hover: hover) {
  .field__control:hover { border-color: var(--color-muted); }
}

.field__control:focus-visible {
  border-color: var(--color-ink);
}

.field__control[aria-invalid="true"] {
  border-color: var(--color-error);
}

.apply__status {
  min-height: 1.6em;
  margin-block: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
}

.apply__status.is-error {
  color: var(--color-error);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .opening__actions .btn {
    width: 100%;
  }

  /* No room beside the studio line: the hint drops just under the icons */
  .sound-hint {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: var(--space-2);
  }

  /* Studio line moves to the left so the icons own the right corner */
  .opening__studio {
    text-align: left; /* the studio line is LTR text, so "left" is literal */
    letter-spacing: 0.18em;
    padding-block: var(--space-5);
  }

  .soon {
    padding: var(--space-6) var(--space-4) var(--space-4);
    margin-inline: calc(-1 * var(--space-2));
  }

  .soon__actions .btn {
    width: 100%;
  }
}

.program__intro {
  max-width: var(--column);
  margin-bottom: var(--space-7);
}