/* «Το φυλλάδιο του fylladio.ai» (weekly_flyer.py): the «Λίστα | Φυλλάδιο» switch, the flyer view on /this-week and the
   card picture on /ola-ta-fylladia. Load after store-page.css and week-pages.css. Every class starts with fy- so nothing
   here touches the site's own rules. The pages are white paper, 9:16, sized with container units (cqw): a page looks the
   same at any width and as its 1080×1920 image. */
.fy-views{display:inline-flex;margin-top:16px;padding:4px;border-radius:12px;background:var(--surface,#111);box-shadow:inset 0 0 0 1px var(--line,#222)}
.fy-views a{padding:8px 16px;border-radius:9px;font:600 14px/1 var(--sans,'Inter',system-ui,sans-serif);text-decoration:none;color:var(--text2,#c9c9c2)}
.fy-views a[aria-selected=true]{background:var(--accent,#b5f23d);color:#0b0b0b}

.fy{margin-top:18px}
.fy-strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.fy-strip::-webkit-scrollbar{display:none}
.fy-ctl{display:flex;align-items:center;justify-content:center;gap:14px}
.fy-ctl button{width:42px;height:42px;border-radius:50%;border:0;background:var(--surface2,#1a1a1a);color:var(--text,#f0f0f0);font:600 22px/1 var(--sans,'Inter',system-ui,sans-serif);cursor:pointer}
.fy-count{min-width:56px;text-align:center;font:600 13px/1 var(--mono,ui-monospace,monospace);color:var(--text2,#c9c9c2)}
.fy-share{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.fy-share button,.fy-share a{display:inline-flex;align-items:center;height:42px;padding:0 16px;border-radius:12px;border:0;text-decoration:none;
  background:var(--surface2,#1a1a1a);color:var(--text,#f0f0f0);font:600 14px/1 var(--sans,'Inter',system-ui,sans-serif);box-shadow:inset 0 0 0 1px var(--line,#222);cursor:pointer}
.fy-share [hidden]{display:none}
.fy-share .fy-send{background:var(--accent,#b5f23d);color:#0b0b0b;box-shadow:none}
.fy-share .fy-viber{background:#7360f2;color:#fff;box-shadow:none}
.fy-share .fy-wa{background:#25d366;color:#0b0b0b;box-shadow:none}
.fy-share [aria-busy=true]{opacity:.6;pointer-events:none}
.fy-status{margin:10px auto 0;max-width:62ch;text-align:center;font-size:13px;color:var(--muted,#8b8b84)}
.fy-status[role=alert]{color:#ff7a5c}
.fy-note{margin:10px auto 0;max-width:62ch;text-align:center;font-size:13px;color:var(--muted,#8b8b84)}

/* ---------------------------------------------------------------- a page */
.fy-pg{--fy-ink:#0b0b0b;--fy-lime:#b5f23d;--fy-tile:#f3f3ee;--fy-muted:#66665e;--fy-red:#c2321f;
  --fy-sans:var(--sans,'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);
  --fy-mono:var(--mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  flex:none;width:min(86vw,400px);aspect-ratio:9/16;container-type:inline-size;scroll-snap-align:center;position:relative;
  display:flex;flex-direction:column;background:#fff;color:#111;border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5);
  font-family:var(--fy-sans);text-align:left;box-sizing:border-box}
.fy-pg *,.fy-pg *::before,.fy-pg *::after{box-sizing:border-box}
.fy-pg a{text-decoration:none;color:inherit}
.fy-pg p,.fy-pg h3{margin:0}
.fy-band{flex:none;display:flex;align-items:center;gap:3cqw;padding:3cqw 4.4cqw;background:var(--fy-ink);color:#fff}
.fy-wm{font:800 4.6cqw/1 var(--fy-sans);letter-spacing:-.045em;white-space:nowrap}
.fy-wm b{color:var(--fy-lime);font-weight:800}
.fy-bt{flex:1;min-width:0;font:700 2.5cqw/1.25 var(--fy-sans);letter-spacing:.07em;color:#d9d9d2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.fy-pn{font:700 2.6cqw/1 var(--fy-mono);color:var(--fy-lime)}
.fy-band.fy-big{padding:3.4cqw 4.4cqw}
.fy-big .fy-wm{font-size:6.2cqw}
.fy-big .fy-bt{font-size:2.9cqw;line-height:1.3;color:#fff;white-space:normal}
.fy-big .fy-bt small{display:block;font-size:2.4cqw;letter-spacing:.14em;color:var(--fy-lime)}

.fy-ph{position:relative;display:grid;place-items:center;background:#fff;border-radius:2cqw;box-shadow:inset 0 0 0 .25cqw #e3e3dc;overflow:hidden}
.fy-ph img{width:88%;height:88%;object-fit:contain}
.fy-burst{position:absolute;z-index:2;display:grid;place-items:center;border-radius:50%;background:var(--fy-lime);color:var(--fy-ink);
  font:800 3.6cqw/1 var(--fy-sans);letter-spacing:-.03em;transform:rotate(-10deg);box-shadow:0 .7cqw 0 rgba(0,0,0,.14);white-space:nowrap}
.fy-ch{display:flex;align-items:center;gap:1.3cqw;min-width:0;font:600 2.6cqw/1.2 var(--fy-sans);color:#4a4a44;white-space:nowrap}
.fy-ch img{flex:none;width:3.6cqw;height:3.6cqw;border-radius:.8cqw}
.fy-ch span{overflow:hidden;text-overflow:ellipsis}
.fy-un{font-weight:500;color:var(--fy-muted)}
.fy-un::before{content:"· "}
.fy-nm{font:400 3.1cqw/1.25 var(--fy-sans);color:#111;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fy-nm b{font-weight:750}
.fy-pr{font:800 6.4cqw/1 var(--fy-mono);letter-spacing:-.05em;color:var(--fy-ink);white-space:nowrap}
.fy-us{font:500 2.5cqw/1.25 var(--fy-mono);color:var(--fy-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fy-ft{flex:none;margin-top:auto;display:flex;align-items:center;gap:1.8cqw;padding:2.4cqw 4.4cqw 2.8cqw;font:500 2.25cqw/1.35 var(--fy-sans);color:var(--fy-muted)}
.fy-eye{flex:none;width:5.4cqw;height:3.6cqw}

/* cover */
.fy-hl{position:relative;padding:4.4cqw 4.6cqw 0;max-width:66cqw}
.fy-h{font:800 9.4cqw/1.02 var(--fy-sans);letter-spacing:-.05em;color:var(--fy-ink)}
.fy-h mark{background:linear-gradient(transparent 60%,var(--fy-lime) 60% 94%,transparent 94%);color:inherit;padding:0}
.fy-hl p+p{margin-top:2.2cqw;font:500 3cqw/1.4 var(--fy-sans);color:#44443e}
.fy-heroes{position:relative;margin:5.6cqw 4cqw 0;display:grid;gap:2.2cqw}
.fy-heroes fylladio-cat{--fc-w:25cqw;--fc-right:3cqw;z-index:3}
.fy-hero{position:relative;display:grid;grid-template-columns:22cqw minmax(0,1fr);gap:3.4cqw;align-items:center;padding:2.4cqw;background:var(--fy-tile);border-radius:3cqw}
.fy-hero .fy-ph{aspect-ratio:1}
.fy-hero .fy-burst{top:-1.4cqw;left:13cqw;width:11.4cqw;height:11.4cqw;font-size:3.5cqw}
.fy-tx{display:grid;gap:1.1cqw;min-width:0}
.fy-hero .fy-nm{font-size:3.1cqw;-webkit-line-clamp:3}
.fy-hero .fy-pr{margin-top:.4cqw;font-size:7.4cqw}

/* inner pages: 2 × 3 */
.fy-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:2.4cqw;padding:3.4cqw 4cqw 0}
.fy-tile{position:relative;display:flex;flex-direction:column;gap:1cqw;min-width:0;min-height:0;padding:2.4cqw;background:var(--fy-tile);border-radius:3cqw;overflow:hidden}
.fy-tile>*{flex:none}
.fy-tile .fy-ph{width:19cqw;height:19cqw;margin:.4cqw auto .2cqw}
.fy-tile .fy-burst{top:6.4cqw;right:2cqw;width:10.4cqw;height:10.4cqw;font-size:3.2cqw}
.fy-tile .fy-pr{margin-top:auto}

/* back page */
.fy-back section{padding:3.2cqw 4.4cqw 0}
.fy-back h3{display:flex;align-items:center;gap:1.8cqw;font:800 5cqw/1.1 var(--fy-sans);letter-spacing:-.03em;color:var(--fy-ink)}
.fy-back h3 .fy-eye{width:6.4cqw;height:4.3cqw}
.fy-back section>p{margin:.8cqw 0 2cqw;font:500 2.7cqw/1.35 var(--fy-sans);color:var(--fy-muted)}
.fy-warn h3{color:var(--fy-red)}
.fy-fake{display:grid;grid-template-columns:15cqw minmax(0,1fr);gap:3cqw;align-items:start;padding:2.2cqw 0;border-top:.25cqw solid #ecece6}
.fy-fake .fy-ph{aspect-ratio:1}
.fy-fake .fy-tx{gap:.8cqw}
.fy-fake .fy-nm{font-size:3cqw}
.fy-fp{display:flex;align-items:baseline;gap:2.4cqw}
.fy-fp .fy-pr{font-size:5cqw}
.fy-lbl{font:600 2.7cqw/1 var(--fy-sans);color:var(--fy-muted);white-space:nowrap}
.fy-lbl s{color:var(--fy-red);font-weight:800;text-decoration-thickness:.45cqw}
.fy-why{font:500 2.45cqw/1.35 var(--fy-sans);color:#3f3f39}
.fy-basics{margin-top:1.4cqw}
.fy-st{display:flex;align-items:center;justify-content:space-between;gap:3cqw;padding:1.9cqw 0;border-top:.25cqw solid #ecece6}
.fy-sn{display:grid;font:700 3.1cqw/1.25 var(--fy-sans);min-width:0}
.fy-sn small{font:500 2.4cqw/1.3 var(--fy-sans);color:var(--fy-muted)}
.fy-sp{font:800 4.4cqw/1 var(--fy-mono);letter-spacing:-.04em;white-space:nowrap}
.fy-sp small{font:500 2.4cqw/1 var(--fy-mono);color:var(--fy-muted);letter-spacing:0}
.fy-bk{margin-top:1.6cqw;padding:2.4cqw 3cqw;border-radius:2.4cqw;background:var(--fy-tile);font:500 2.65cqw/1.45 var(--fy-sans);color:#2d2d28}
.fy-nw{white-space:nowrap;font-family:var(--fy-mono);font-weight:800}
.fy-cta{margin-top:auto;display:grid;gap:.8cqw;padding:4cqw 4.4cqw 4.6cqw;background:var(--fy-ink);color:#fff}
.fy-cta span{font:600 3.2cqw/1.2 var(--fy-sans);color:#d9d9d2}
.fy-cta b{font:800 6.2cqw/1 var(--fy-mono);letter-spacing:-.05em;color:var(--fy-lime)}

/* the /ola-ta-fylladia card picture: fills its box */
.fy-mini{width:100%;border-radius:0;box-shadow:none;scroll-snap-align:none}
.fy-mini .fy-hl{max-width:none}
.fy-row{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;margin:auto 4.4cqw 5cqw}
.fy-row .fy-ph{aspect-ratio:1;overflow:visible}
.fy-row .fy-ph img{border-radius:2cqw}
.fy-row .fy-burst{top:-3cqw;right:-3cqw;width:12cqw;height:12cqw;font-size:3.6cqw}

@media (min-width:900px){.fy-strip .fy-pg{width:380px}}
@media (prefers-reduced-motion:reduce){.fy-strip{scroll-behavior:auto}}