/* ============================================================
   Rotaract Siegen — Quarterly Newsletter
   Print-ready A4 stylesheet (brand "pink" theme = Ausgabe 1 style)
   Render to PDF with Chrome headless (see scripts/build.sh).
   Components: .page .masthead .hero .intro .ausblick
               .month-title .article .photo .highlights
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Caveat:wght@600;700&family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap');

/* Force EXACT A4 so a 297mm page element does not overflow onto a blank page
   (Chrome maps `size:A4` to 8.27x11.69in = 296.93mm and rounds us over). */
@page{ size:210mm 297mm; margin:0; }

:root{
  --pink:        #E2007A;   /* primary brand magenta (matches logo) */
  --pink-deep:   #C2006A;
  --pink-tint:   #FBE0EE;   /* box backgrounds */
  --pink-tint-2: #F6CCE0;
  --ink:         #232020;
  --muted:       #4a4a4a;
  --bar:         10mm;      /* pink top/bottom bar height */
  --pad-x:       15mm;
  --pad-y:       16mm;
}

*{ box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body{ margin:0; padding:0; background:#dcdcdc; }
body{ font-family:'Lato',-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); line-height:1.5; }

/* ---------- A4 page ---------- */
.page{
  position:relative;
  width:210mm; height:297mm;
  margin:0 auto;
  padding:calc(var(--bar) + 8mm) var(--pad-x) calc(var(--bar) + 6mm);
  background:#fff;
  overflow:hidden;
  page-break-after:always;
  box-shadow:0 2mm 6mm rgba(0,0,0,.18);   /* screen only; ignored in print */
}
.page:last-child{ page-break-after:auto; }
.page::before, .page::after{
  content:""; position:absolute; left:0; right:0; height:var(--bar); background:var(--pink); z-index:5;
}
.page::before{ top:0; }
.page::after{ bottom:0; }

@media print{
  html,body{ background:#fff; }
  .page{ margin:0; box-shadow:none; }
}

/* full-bleed helper (reaches page side edges, sits between the bars) */
.bleed{ margin-left:calc(-1 * var(--pad-x)); margin-right:calc(-1 * var(--pad-x)); width:210mm; }

/* ---------- cover masthead ---------- */
.masthead{ text-align:center; margin-bottom:7mm; }
.masthead .kicker{
  font-family:'Lato'; font-weight:700; letter-spacing:.28em; text-transform:uppercase;
  font-size:10.5pt; color:var(--ink); margin:0 0 2mm;
}
.masthead .wordmark{
  font-family:'Oswald'; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:54pt; line-height:.9; color:var(--pink); margin:0 0 4mm;
}
.masthead .logo-lockup{ display:flex; align-items:center; justify-content:center; gap:3mm; flex-direction:column; }
.masthead .logo-lockup img{ height:17mm; width:auto; }
.masthead .club{ font-family:'Oswald'; font-weight:600; color:var(--pink); font-size:15pt; letter-spacing:.04em; margin-top:-2mm; }
.masthead .edition{
  font-family:'Oswald'; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  font-size:14pt; color:var(--muted); margin:4mm 0 0;
}

/* ---------- hero image ---------- */
.hero{ display:block; }
.hero img{ display:block; width:100%; height:95mm; object-fit:cover; }
.hero--tall img{ height:150mm; }

/* ---------- intro block (cover) ---------- */
.section-title{
  font-family:'Oswald'; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  color:var(--ink); font-size:17pt; line-height:1.08; margin:7mm 0 3mm;
}
.intro{ display:grid; grid-template-columns:1fr 62mm; gap:8mm; align-items:start; }
.intro p{ margin:0 0 2.4mm; font-size:10.5pt; }

.ausblick{ background:var(--pink-tint); padding:6mm 6mm 7mm; }
.ausblick h3{
  font-family:'Oswald'; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--ink); font-size:14pt; margin:0 0 3mm;
}
.ausblick ul{ list-style:none; margin:0; padding:0; }
.ausblick li{ font-size:10.5pt; margin:0 0 3mm; }
.ausblick li b{ color:var(--pink-deep); }

/* ---------- month divider title (script) ---------- */
.month-title{
  font-family:'Caveat'; font-weight:700; text-align:center;
  font-size:34pt; color:var(--pink); margin:0 0 4mm; line-height:1;
}

/* ---------- article block ---------- */
.article{ display:grid; gap:5mm 6mm; margin-bottom:5mm; align-items:start; }
.article--img-left  { grid-template-columns:56mm 1fr; }
.article--img-right { grid-template-columns:1fr 56mm; }
.article--img-right .photo{ order:2; }
.article--full{ grid-template-columns:1fr; }
.article h2{
  font-family:'Oswald'; font-weight:700; text-transform:uppercase; letter-spacing:.01em;
  color:var(--pink); font-size:14.5pt; line-height:1.06; margin:0 0 2.5mm;
}
.article h2.ink{ color:var(--ink); }
.article p{ margin:0 0 2mm; font-size:9.8pt; }

/* photo + placeholder */
.photo{ overflow:hidden; }
.photo img{ display:block; width:100%; height:auto; object-fit:cover; }
.photo.fixed img{ height:48mm; }
.photo.tall img{ height:78mm; }
.placeholder{
  width:100%; height:48mm; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--pink-tint),var(--pink-tint-2));
  color:var(--pink-deep); font-family:'Oswald'; font-weight:600; letter-spacing:.05em;
  font-size:10pt; text-align:center; padding:4mm;
}

/* ---------- highlights recap box ---------- */
.highlights{ background:var(--pink-tint); padding:5mm 6mm 6mm; margin-top:3mm; }
.highlights h3{
  font-family:'Oswald'; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--pink-deep); font-size:12.5pt; margin:0 0 2.5mm;
}
.highlights p{ margin:0; font-size:10.3pt; }

/* ---------- misc ---------- */
.spacer{ height:5mm; }
.center{ text-align:center; }
.footer-note{ position:absolute; bottom:calc(var(--bar) + 2mm); left:var(--pad-x); right:var(--pad-x);
  text-align:center; font-size:8pt; color:#9a9a9a; }