/* PAREA 0.7.25 — Responsive text-safe layouts. Keeps approved visual identity. */
@media screen {
  /* The welcome gradient is a rounded PANEL, not merely a section separator.
     Its original zero inline-padding put the text directly on the curved edge. */
  body.welcome-page.parea-soft-garden .welcome-hero {
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1.68fr) minmax(182px, .62fr);
    gap: clamp(20px, 2.9vw, 42px);
    padding: clamp(27px, 3.1vw, 46px) clamp(23px, 3.65vw, 51px)
             clamp(29px, 3.4vw, 49px);
    align-items: center;
    min-width: 0;
    min-height: 0;
  }
  body.welcome-page .welcome-hero > div:first-child { min-width: 0; }
  body.welcome-page .welcome-hero h1 {
    font-size: clamp(2.32rem, 4.35vw, 3.68rem);
    line-height: 1.15;
    letter-spacing: -.025em;
    margin-bottom: clamp(15px, 1.8vw, 24px);
    overflow-wrap: break-word;
  }
  body.welcome-page .welcome-hero .welcome-lead {
    max-width: 61ch;
    font-size: clamp(1rem, 1.36vw, 1.14rem);
    line-height: 1.78;
    overflow-wrap: break-word;
  }
  body.welcome-page .welcome-hero .welcome-mark {
    width: min(100%, 254px);
    max-width: 100%;
    min-width: 0;
    padding: clamp(17px, 2.1vw, 26px);
  }
  body.welcome-page .welcome-hero .welcome-mark img {
    width: clamp(87px, 8.9vw, 124px);
    height: auto;
    max-width: 100%;
  }
  body.welcome-page .welcome-hero .welcome-mark span {
    overflow-wrap: break-word;
    line-height: 1.55;
  }

  /* Guard text in existing cards against clipping if the label is longer,
     font size is increased, or the screen is narrower. */
  body.parea-soft-garden :is(.welcome-card, .welcome-stat, .guide-card,
    .story-hub-card, .story-shelf-card, .hub-tile, .age-card,
    .collection-card, .world-card, .scenario, .page-header,
    .hero-copy, .intro-main, .guide-step) { min-width: 0; }
  body.parea-soft-garden :is(.welcome-card, .welcome-stat, .guide-card,
    .story-hub-card, .story-shelf-card, .hub-tile, .age-card,
    .collection-card, .world-card, .scenario, .page-header,
    .hero-copy, .intro-main, .guide-step)
    :is(h1, h2, h3, h4, p, small) {
      overflow-wrap: break-word;
    }
}
@media screen and (max-width: 900px) {
  body.welcome-page.parea-soft-garden .welcome-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(21px, 3vw, 32px);
    padding: clamp(24px, 3.8vw, 34px);
  }
  body.welcome-page .welcome-hero h1 {
    font-size: clamp(2.18rem, 5.9vw, 3.05rem);
  }
  body.welcome-page .welcome-hero .welcome-mark {
    justify-self: start;
    width: auto;
    max-width: min(100%, 325px);
    flex-direction: row;
    transform: none;
    gap: 16px;
  }
  body.welcome-page .welcome-hero .welcome-mark img { width: 78px; }
  body.welcome-page .welcome-hero .welcome-mark span { text-align: left; }
}
@media screen and (max-width: 550px) {
  body.welcome-page .welcome-main { padding-inline: clamp(12px, 4vw, 20px); }
  body.welcome-page.parea-soft-garden .welcome-hero {
    padding: clamp(20px, 5.3vw, 25px) clamp(18px, 5.2vw, 23px);
    gap: 22px;
  }
  body.welcome-page .welcome-hero h1 {
    font-size: clamp(2rem, 7.6vw, 2.55rem);
    line-height: 1.17;
    letter-spacing: -.02em;
    margin-bottom: 16px;
  }
  body.welcome-page .welcome-hero .welcome-lead {
    font-size: clamp(.96rem, 3.9vw, 1.05rem);
    line-height: 1.74;
  }
  body.welcome-page .welcome-hero .welcome-mark {
    padding: 14px 17px;
    border-radius: 23px;
    gap: 12px;
    max-width: 100%;
  }
  body.welcome-page .welcome-hero .welcome-mark img { width: 66px; }
}
@media screen and (max-width: 360px) {
  body.welcome-page .welcome-hero h1 { font-size: 2rem; }
}

/* Safe text flow for adult pages, admin panels and long Greek headings. */
@media screen {
  body.parea-soft-garden :is(.login-layout, .login-story, .login-panel,
    .login-card, .login-intro, .admin-layout, .sidebar, .workspace,
    .main-content, .overview-hero, .two-columns, .stats-grid,
    .status-list, .suggestion-card, .admin-footer,
    .guide-card, .hub-tile, .story-hub-card, .story-shelf-card,
    .story-hub-intro, .intro-main, .guide-step) { min-width: 0; }

  body.parea-soft-garden :is(.login-intro, .login-card, .overview-hero,
    .main-content, .suggestion-card, .hub-tile, .guide-card,
    .story-hub-card, .story-shelf-card, .guide-step)
    :is(h1, h2, h3, h4, p, small, strong) {
    overflow-wrap: break-word;
  }
  body.parea-soft-garden :is(.login-card, .overview-hero, .hub-tile,
    .story-hub-card, .story-shelf-card, .guide-card) {
    box-sizing: border-box;
  }
}
@media screen and (max-width: 600px) {
  body.parea-soft-garden .login-intro h1 {
    line-height: 1.16;
    overflow-wrap: break-word;
  }
  body.parea-soft-garden .overview-hero {
    min-width: 0;
  }
}