/* ==========================================================================
   Αστερόπλοιο — home.css (αρχική σελίδα)
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(120% 70% at 80% 20%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, var(--c-cream) 0%, #FFF2CC 62%, var(--c-cream-deep) 100%);
  padding-block: clamp(28px, 5vw, 72px) clamp(96px, 11vw, 160px);
}
.hero__sky, .hero__layer { position: absolute; inset: 0; pointer-events: none; }
.hero__sky { z-index: 0; }
.hero__near { z-index: 3; }
.hero__star { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--c-yellow); opacity: .9; }
.hero__star svg { width: 100%; height: 100%; }
.motion-ok .hero__star svg { animation: twinkle 5.5s ease-in-out var(--d) infinite; }

.hero__cloud { position: absolute; height: auto; overflow: visible; }
.hero__cloud--a { left: -2%; top: 64%; width: clamp(110px, 14vw, 190px); }
.hero__cloud--b { right: 3%; top: 6%; width: clamp(80px, 9vw, 130px); }
.hero__cloud--c { left: 38%; top: 3%; width: clamp(60px, 6vw, 92px); opacity: .9; }
.hero__cloud--near { right: -3%; bottom: 13%; width: clamp(150px, 19vw, 260px); }
.hero__page { position: absolute; height: auto; overflow: visible; }
.hero__page--a { left: 47%; top: 66%; width: clamp(36px, 4vw, 56px); transform: rotate(-14deg); }
.hero__page--b { right: 9%; top: 24%; width: clamp(28px, 3vw, 44px); transform: rotate(16deg); }

.hero__grid {
  position: relative; z-index: 2;
  display: grid; align-items: center; gap: var(--s-5) var(--s-7);
  grid-template-columns: minmax(0, 1fr);
}
.hero__title { font-size: var(--fs-display); margin-top: var(--s-4); max-width: 13ch; }
.hero__title-hl {
  background: linear-gradient(transparent 60%, var(--c-yellow-soft) 60%, var(--c-yellow-soft) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-inline: .05em;
}
.hero__lead { font-size: var(--fs-lead); margin-top: var(--s-5); max-width: 32ch; }
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.hero__place { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 600; text-decoration: none; }
.hero__place > span { border-bottom: 2px dotted var(--c-ink); }
.hero__place:hover > span { border-bottom-style: solid; border-bottom-color: var(--c-yellow); }

.hero__art { position: relative; justify-self: center; width: min(78vw, 360px); }
.hero__glow { position: absolute; inset: 4% 2% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.hero__ship, .hero__ship-mouse, .hero__ship-bob { position: relative; }
.hero__ship-img { width: 100%; height: auto; }
.hero__flame { position: absolute; left: 63.5%; top: 74%; width: 23%; height: auto; transform-origin: 0% 45%; pointer-events: none; }
.motion-ok .hero__ship-bob { animation: bob 7s ease-in-out infinite alternate; }
.motion-ok .hero__flame { animation: flicker 1.1s ease-in-out infinite alternate; }

.hero .star-slot--hero { left: 31%; top: 9%; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .hero__art { width: min(100%, 520px); }
}
@media (max-width: 899px) {
  .hero__cloud--b, .hero__cloud--c, .hero__page--b { display: none; }
  .hero .eyebrow { letter-spacing: .1em; font-size: .8125rem; }
  .hero__cloud--near { bottom: 7%; }
  .hero__page--a { left: 6%; top: auto; bottom: 16%; }
  .hero .star-slot--hero { left: auto; right: 6%; top: 46%; }
}

/* ---------- Intro ---------- */
.intro { position: relative; padding-block: var(--s-8) calc(var(--s-9) + 24px); }
.intro__text {
  font-family: var(--f-head); font-weight: 700;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 2rem); line-height: 1.5;
  max-width: 34em; margin-inline: auto; text-align: center; text-wrap: balance;
}
.hl { background: linear-gradient(transparent 62%, var(--c-yellow-soft) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Sections ---------- */
.events { padding-bottom: calc(var(--section) + 40px); }
.events .star-slot--events { right: 4%; top: 40px; }
.section-cta { margin-top: var(--s-7); text-align: center; }
.workshops .star-slot--workshops { left: 2%; bottom: 48px; }

/* ---------- Bookstore + space ---------- */
.bookstore { padding-bottom: calc(var(--section) + 48px); }
.bookstore__grid { display: grid; gap: var(--s-7); align-items: center; }
.bookstore__art {
  position: relative; background: var(--c-cream); border: var(--border); border-radius: var(--radius);
  padding: clamp(20px, 4vw, 48px); box-shadow: 10px 10px 0 0 var(--c-yellow);
}
.bookstore__ill { width: 100%; height: auto; }
@media (max-width: 899px) { .bookstore__art { width: min(100%, 460px); margin-inline: auto; } .party__art img { width: min(100%, 400px); } }
.bookstore__art .star-slot--shelf { right: 8%; top: 6%; }
.bookstore__text .section-title { margin-top: var(--s-3); }
.bookstore__text .lead { margin-top: var(--s-5); max-width: 40ch; }
.bookstore__text .btn { margin-top: var(--s-6); }

.space { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.space__card { background: var(--c-white); border: var(--border); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); }
.space__title { font-size: var(--fs-h3); margin-bottom: var(--s-4); }
.space__list { display: grid; gap: var(--s-4); }
.space__list li { display: flex; gap: .75em; align-items: flex-start; }
.space__list .icon { margin-top: .2em; }
.space__list a { font-weight: 600; text-decoration-color: var(--c-yellow); display: inline-block; min-height: 32px; padding-top: 2px; }
.space__hours { white-space: pre-line; }
.space__placeholders { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.space__placeholders > *, .space > * { min-width: 0; }

@media (min-width: 900px) {
  .bookstore__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .space { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: stretch; }
  /* No photos yet → one horizontal card across the container. */
  .space:not(:has(.space__placeholders)) { grid-template-columns: 1fr; }
  .space:not(:has(.space__placeholders)) .space__card { display: grid; grid-template-columns: 220px 1fr; align-items: center; }
  .space:not(:has(.space__placeholders)) .space__title { margin: 0; }
  .space:not(:has(.space__placeholders)) .space__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- Party ---------- */
.party { padding-bottom: calc(var(--section) + 24px); }
.party__grid { display: grid; gap: var(--s-6); align-items: center; }
.party__art img { width: min(100%, 520px); margin-inline: auto; }
.party__text .section-title { margin-top: var(--s-3); }
.party__text .lead { margin-top: var(--s-5); max-width: 40ch; }
.party__text .btn { margin-top: var(--s-6); }
.party .star-slot--party { right: 6%; bottom: 80px; }
@media (min-width: 900px) {
  .party__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .party__text { order: -1; }
}

/* ---------- News ---------- */
.news-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.news .newsletter, .news .placeholder-tile--wide { margin-top: var(--s-7); }