/* learn.css — styling for the public, server-rendered SEO pages (/learn and
   /phrase/:slug). Reuses the app's tokens + .phrase-card so the public pages
   feel identical to the app, and adds a light-weight public header/nav (no
   account menu) plus the marketing CTA + phrase-grid blocks. */

.learn-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem 0.75rem;
  position: relative;
  z-index: 5;
  /* Match the content column (.learn-main is max-width:720px, centred) so on
     desktop the Log in / Sign up nav aligns with the content instead of pinning
     to the far viewport edge. */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  box-sizing: border-box;
}
.learn-header .app-title { margin: 0; text-decoration: none; }
.learn-title { text-decoration: none; }
.learn-header .app-subtitle {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  color: #fff;
  opacity: 0.95;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.28);
}

.learn-nav { display: flex; align-items: center; gap: 0.6rem; }
/* Sits directly on the blue sea, so it needs the same white-on-shadow treatment
   as the rest of the header — deep-blue text on this background is unreadable. */
.learn-login {
  /* These two are the only conversion path on the public /learn pages, so they
     get the full touch minimum rather than the height their text happened to
     occupy (52x36 and 120x40). */
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
  text-shadow: 1px 1px 4px rgba(0, 30, 60, 0.35);
}
.learn-login:hover { text-decoration: underline; }
.learn-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min, 44px);
  background: linear-gradient(135deg, var(--sun-gold, #ffb703), #ff9e00);
  color: #013a63;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(255, 158, 0, 0.35);
  white-space: nowrap;
}
.learn-signup:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 158, 0, 0.45); }

.learn-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  width: 100%;
  box-sizing: border-box;
}

/* --- single phrase page --- */
.learn-phrase { position: relative; width: 100%; max-width: 520px; }
.learn-badge {
  display: inline-block;
  align-self: flex-start;
  background: rgba(42, 111, 151, 0.12);
  color: var(--medium-blue, #2a6f97);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
.learn-phrase .greek-text { font-size: 2.1rem; line-height: 1.15; }
.learn-realvoice {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  color: var(--medium-blue, #2a6f97);
  text-align: center;
  font-weight: 600;
}

/* --- marketing CTA --- */
.learn-cta {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(160deg, #013a63, #01497c);
  color: #eaf4fb;
  border-radius: 20px;
  padding: 1.6rem 1.4rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(1, 58, 99, 0.28);
}
.learn-cta h2 { margin: 0 0 0.5rem; font-size: 1.3rem; color: #fff; }
.learn-cta p { margin: 0 0 1.1rem; font-size: 0.98rem; opacity: 0.92; line-height: 1.5; }
.learn-cta strong { color: var(--sun-gold, #ffcf56); }
.learn-cta-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--sun-gold, #ffb703), #ff9e00);
  color: #013a63;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  padding: 0.8rem 2.2rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(255, 158, 0, 0.4);
}
.learn-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(255, 158, 0, 0.5); }

/* --- related links --- */
.learn-related { width: 100%; max-width: 520px; }
/* Also on the sea background — same white treatment as .learn-cat h2. */
.learn-related h3 { color: #fff; font-size: 1.1rem; margin: 0 0 0.75rem; text-shadow: 1px 2px 6px rgba(0, 30, 60, 0.35); }
.learn-related-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.learn-related-list a {
  display: block;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(1, 58, 99, 0.1);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  color: var(--deep-blue, #013a63);
  font-weight: 700;
  text-decoration: none;
}
.learn-related-list a span { color: var(--medium-blue, #2a6f97); font-weight: 500; }
.learn-related-list a:hover { background: #fff; border-color: var(--sun-gold, #ffb703); }
.learn-all {
  display: inline-block;
  color: var(--deep-blue, #013a63);
  font-weight: 800;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(1, 58, 99, 0.12);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
}
.learn-all:hover { background: #fff; border-color: var(--sun-gold, #ffb703); }

/* --- /learn hub --- */
/* The intro sits over the darker top of the sea gradient, so it uses white
   text with a soft shadow (like the landing hero) for legibility. */
.learn-intro { width: 100%; max-width: 640px; text-align: center; }
.learn-intro h1 {
  color: #fff;
  font-size: 1.7rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.6rem;
  text-shadow: 1px 2px 8px rgba(0, 30, 60, 0.35);
}
.learn-intro p {
  color: #eaf4fb;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  text-shadow: 1px 1px 5px rgba(0, 30, 60, 0.3);
}
.learn-intro strong { color: var(--sun-gold, #ffcf56); }

.learn-cat { width: 100%; max-width: 640px; }
/* Category headings sit on the open sea, not on a card — so they follow the
   same white + soft-shadow rule as .learn-intro. They were deep-blue on blue,
   which made "Courtesy", "Everyday" etc. all but disappear. */
/* The category heading is also the link into that category — the main way
   through the public /learn hub — so it carries the touch minimum. */
.learn-cat h2 a {
  display: inline-flex; align-items: center;
  min-height: var(--tap-min, 44px);
  color: inherit; text-decoration: none;
}
.learn-cat h2 a:hover { text-decoration: underline; }
.learn-cat h2 {
  color: #fff;
  font-size: 1.15rem;
  margin: 0 0 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid rgba(255, 207, 86, 0.85);
  text-shadow: 1px 2px 6px rgba(0, 30, 60, 0.35);
}
.learn-cat h2 a { color: inherit; text-decoration: none; }
.learn-cat h2 a:hover { color: var(--sun-gold, #ffcf56); text-decoration: underline; }
/* The "More X phrases →" link was flush against the last row of cards, reading
   as an overlap. Give it its own breathing room. */
.learn-cat > p { margin: 0.9rem 0 0; }
.learn-crumbs { width: 100%; max-width: 640px; color: #eaf4fb; font-size: 0.85rem; font-weight: 700; text-shadow: 1px 1px 4px rgba(0,30,60,0.3); }
.learn-crumbs a { color: #fff; }
.learn-crumbs span { opacity: 0.85; }
.learn-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.learn-grid a {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(1, 58, 99, 0.1);
  border-radius: 14px;
  padding: 0.85rem;
  text-decoration: none;
  height: 100%;
  box-sizing: border-box;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.learn-grid a:hover { transform: translateY(-2px); border-color: var(--sun-gold, #ffb703); }
.lg-greek { color: var(--deep-blue, #013a63); font-weight: 800; font-size: 1.05rem; }
.lg-en { color: var(--medium-blue, #2a6f97); font-size: 0.85rem; }

@media (max-width: 380px) {
  .learn-grid { grid-template-columns: 1fr; }
  .learn-header .app-subtitle { font-size: 0.85rem; }
}

/* --- wide screens -----------------------------------------------------------
   These pages are the public, indexable half of the site, but they were built
   mobile-first and never given a desktop layout: at 1440px the whole thing sat
   in a 720px column using half the viewport, with the phrase grid stuck at two
   narrow columns while there was room for four.

   Widen the shared content column and let the grid fill it. Prose keeps a
   readable measure (the intro and the single-phrase card do NOT widen with the
   grid) — only the scannable card grids take the extra room. */
@media (min-width: 960px) {
  .learn-header,
  .learn-main { max-width: 1080px; }

  /* Category blocks hold the grids, so they take the full column ... */
  .learn-cat,
  .learn-crumbs { max-width: 1080px; }

  /* ... while running text stays at a comfortable line length. */
  .learn-intro { max-width: 46rem; }

  /* auto-fill rather than a fixed count: four columns at 1080px, and it degrades
     by itself if the column width ever changes. */
  .learn-grid {
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 0.75rem;
  }

  /* A single phrase is a focused read, not a grid — widen it only a little. */
  .learn-phrase,
  .learn-related { max-width: 40rem; }
}