/* ============================================================
   LAYOUT — ένα grid, δηλωμένο μία φορά.
   Κάθε παιδί δραπετεύει σε full width με class, χωρίς wrappers,
   χωρίς negative margins, χωρίς 100vw (που σπάει με scrollbar).
   ============================================================ */

.layout {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [breakout-start] var(--breakout)
    [content-start] var(--content) [content-end]
    var(--breakout) [breakout-end]
    minmax(var(--gutter), 1fr) [full-end];
}

.layout > *          { grid-column: content; }
.layout > .breakout  { grid-column: breakout; }
.layout > .full      { grid-column: full; }

/* Ένθετο grid για περιεχόμενο μέσα σε full-bleed section */
.full > .inner {
  display: grid;
  grid-template-columns: inherit;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [breakout-start] var(--breakout)
    [content-start] var(--content) [content-end]
    var(--breakout) [breakout-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.full > .inner > *         { grid-column: content; }
.full > .inner > .breakout { grid-column: breakout; }

/* ------------------------------------------------------------
   ΡΥΘΜΟΣ SECTION — τρεις πυκνότητες, εναλλάξ.
   Ίδιο padding σε κάθε section είναι το ισχυρότερο σήμα template.
   ------------------------------------------------------------ */

.sec       { padding-block: var(--space-2xl); }   /* κανονικό  */
.sec--tight{ padding-block: var(--space-xl);  }   /* πυκνό     */
.sec--airy { padding-block: var(--space-3xl); }   /* αραιό     */

/* Ανεστραμμένο section */
.sec--deep {
  background: var(--deep);
  color: var(--ink-invert);
}
.sec--deep h1, .sec--deep h2, .sec--deep h3, .sec--deep h4 { color: var(--ink-invert); }
.sec--deep a  { color: var(--clay-lift); }
.sec--deep a:hover { color: var(--ink-invert); }
.sec--deep .lede,
.sec--deep .muted { color: var(--ink-invert-muted); }

.sec--sunk { background: var(--paper-sunk); }

/* ------------------------------------------------------------
   ΣΤΗΛΕΣ — ασύμμετρες. Το 6/6 διαβάζεται ως προεπιλογή.
   Mobile first: όλα μονή στήλη, οι στήλες μπαίνουν με min-width.
   ------------------------------------------------------------ */

.cols {
  display: grid;
  gap: var(--space-l) var(--space-xl);
}

@media (min-width: 48rem) {
  .cols--7-5 { grid-template-columns: 7fr 5fr; }
  .cols--5-7 { grid-template-columns: 5fr 7fr; }
  .cols--4-8 { grid-template-columns: 4fr 8fr; }
  .cols--8-4 { grid-template-columns: 8fr 4fr; }
}

/* Intrinsic responsive — προτιμάται από breakpoints όπου δουλεύει */
.grid-auto {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}

.grid-auto--wide {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
}

/* Όταν ένα κουτί έχει εικόνα και το διπλανό όχι, το ίσο ύψος αφήνει μισοάδειο
   κουτί. Εδώ το καθένα παίρνει το ύψος του περιεχομένου του.
   Το align-items από μόνο του δεν αρκεί: η .card ζητά block-size 100%, οπότε
   γεμίζει τη γραμμή ό,τι κι αν λέει η στοίχιση. Πρέπει να ακυρωθεί κι αυτό. */
.grid-auto--wide.items-top { align-items: start; }
.grid-auto--wide.items-top > .card { block-size: auto; }

/* ------------------------------------------------------------
   ΣΤΟΙΧΙΣΗ — δεν είναι όλα κεντραρισμένα
   ------------------------------------------------------------ */

.narrow      { max-width: 42rem; }
.narrow-mid  { max-width: 34rem; }
.push-right  { margin-inline-start: auto; }

@media (min-width: 62rem) {
  /* Offset στήλη: ξεκινά χαμηλότερα από τη γείτονά της — σπάει το grid σκόπιμα */
  .offset-down { margin-block-start: var(--space-2xl); }
}

/* ------------------------------------------------------------
   Στοίβα: το κενό ανάμεσα σε συγγενή στοιχεία είναι πάντα
   μικρότερο από το κενό προς το επόμενο άσχετο στοιχείο.
   ------------------------------------------------------------ */

.stack       > * + * { margin-block-start: var(--space-s); }
.stack-xs    > * + * { margin-block-start: var(--space-2xs); }
.stack-m     > * + * { margin-block-start: var(--space-m); }
.stack-l     > * + * { margin-block-start: var(--space-l); }
.stack-xl    > * + * { margin-block-start: var(--space-xl); }