/* MTL hockey flyer kit — shared styles. Letter pages are 816x1056 CSS px (96dpi). */
@font-face { font-family: "Saira Stencil One"; src: url("../assets/fonts/SairaStencilOne-Regular.ttf"); }
@font-face { font-family: Oswald; src: url("../assets/fonts/Oswald[wght].ttf"); font-weight: 200 700; }

:root {
  --navy: #0A2D5E; --navy-deep: #071F42; --gold: #FFD200;
  --ice: #6FB3E0; --red: #E8352E; --cream: #F6F3EE; --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #444; }
body { font-family: Oswald, "Arial Narrow", sans-serif; }

.flyer {
  width: 816px; height: 1056px; margin: 0 auto; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(ellipse 120% 55% at 50% -10%, #1a4a8f 0%, var(--navy) 45%, var(--navy-deep) 100%);
  color: var(--white); text-align: center;
}
.flyer--ig { width: 1080px; height: 1350px; }

.crest { background: var(--white); border-radius: 0 0 18px 18px; padding: 10px 26px 14px; }
.crest img { height: 110px; display: block; }

.headline { font-family: "Saira Stencil One", Oswald, sans-serif; font-size: 120px; line-height: 0.95; letter-spacing: 4px; margin-top: 8px; }
.banner-gold { color: var(--gold); font-weight: 700; font-size: 40px; letter-spacing: 2px; text-transform: uppercase; }
.season { font-weight: 300; font-size: 28px; letter-spacing: 6px; margin-top: 2px; }

.photo-band { position: relative; width: 100%; margin-top: 14px; flex: 1; min-height: 0; }
.photo-band img.team { width: 62%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.qr-box { position: absolute; right: 36px; top: 24px; background: var(--white); color: var(--navy-deep); border-radius: 10px; padding: 12px; width: 168px; }
.qr-box img { width: 100%; display: block; }
.qr-box .scan { font-weight: 700; font-size: 17px; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 6px; }

.divisions { display: flex; gap: 14px; padding: 16px 28px 0; width: 100%; }
.division-card { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; padding: 12px 10px 14px; }
.division-card h3 { font-size: 26px; text-transform: uppercase; letter-spacing: 1px; color: var(--ice); }
.division-card .ages { font-size: 15px; font-weight: 300; color: var(--white); opacity: 0.9; }
.division-card ul { list-style: none; margin-top: 8px; font-size: 15px; font-weight: 300; line-height: 1.35; }
.fee { font-size: 22px; font-weight: 700; color: var(--gold); margin-top: 6px; }
.tbd-badge { display: inline-block; background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 15px; padding: 2px 10px; border-radius: 999px; text-transform: uppercase; }

.accent-bar { width: 100%; height: 10px; background: var(--red); margin-top: 16px; }
.footer-strip { width: 100%; background: var(--cream); color: var(--navy); padding: 14px 20px 18px; font-weight: 500; font-size: 21px; line-height: 1.45; }
.footer-strip strong { font-weight: 700; }

@media print { html, body { background: none; } .flyer { margin: 0; } }
@page { size: letter; margin: 0; }

/* variants */
.flyer--ig .crest img { height: 140px; }
.flyer--ig .headline { font-size: 160px; }
.flyer--ig .banner-gold { font-size: 52px; }
.flyer--ig .season { font-size: 34px; }
.flyer--ig .qr-box { width: 220px; right: 44px; }
.flyer--ig .qr-box .scan { font-size: 20px; }
.flyer--ig .divisions { gap: 18px; padding: 20px 36px 0; }
.flyer--ig .division-card h3 { font-size: 32px; }
.flyer--ig .division-card .ages { font-size: 19px; }
.flyer--ig .division-card ul { font-size: 19px; }
.flyer--ig .fee { font-size: 28px; }
.flyer--ig .tbd-badge { font-size: 19px; }
.flyer--ig .footer-strip { font-size: 26px; padding: 18px 24px 22px; }

/* Snapshot print overlapping the photo band — fills the dead margin beside
   the main photo without ever covering the QR box (left placement only). */
.snapshot {
  position: absolute;
  left: 26px;
  bottom: -4px;
  width: 190px;
  transform: rotate(-5deg);
  border: 7px solid var(--white);
  border-bottom-width: 26px; /* polaroid chin */
  border-radius: 3px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.flyer--ig .snapshot { width: 250px; left: 34px; }

/* The locker-room photo is pre-cropped close to the band's aspect; center
   whatever sliver object-fit still trims. Selector must out-rank
   .photo-band img.team or its object-position: top wins. */
.photo-band img.team--lockerroom { object-position: center; }