/* ============================================================
   WIN v2 — WordPress additions (always loaded, after layout.css)
   Small glue the static prototype didn't need: real <img> hero,
   linked card titles, skip-link, block-content rhythm.
   ============================================================ */

/* Hero now shows the actual disc it references (Nuke), not the old-site photo.
   Transparent PNG floating on a soft radial glow — no photo frame. */
.hero-media .hero-disc {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
}
.hero-media .hero-disc::before {
  content: "";
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(168,85,247,.32), rgba(236,72,153,.14) 55%, transparent 72%);
  filter: blur(8px);
}
.hero-media .hero-disc-img {
  position: relative;
  width: 90%;
  max-width: 460px;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  animation: wdg-hero-float 6s ease-in-out infinite;
}
@keyframes wdg-hero-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-disc-img { animation: none; }
}

/* Header action icons: keep them in a horizontal row no matter what wpautop
   does to the shortcode markup (it was injecting <p>/<br> → vertical stack). */
.hdr-actions { flex-direction: row !important; flex-wrap: nowrap; }
.hdr-actions p { display: contents; margin: 0; }   /* unwrap any auto-paragraph */
.hdr-actions br { display: none; }

/* Sticky header: the block theme wraps the header template part in a
   <div class="wp-block-template-part"> only as tall as the header, so
   position:sticky had no room to travel and the menu scrolled away. Collapse
   that wrapper so .hdr becomes a direct child of the scroll container and
   sticks to the top while scrolling down. */
.wp-site-blocks > .wp-block-template-part:first-child { display: contents; }
.hdr { position: sticky; top: 0; z-index: 50; }

/* Linked product titles inherit the card title styling */
.card-title a { color: inherit; }
.card-title a:hover { color: var(--violet); }

/* Category cards link to the shop, keep the disc centered */
.catcard-disc { display: grid; place-items: center; }

/* Generic content pages (blog, page.html) sit on the dark surface */
.wdg-content {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--gut);
}
.wdg-content h1, .wdg-content h2, .wdg-content h3 {
  font-family: 'Saira Condensed', sans-serif; text-transform: uppercase;
}
.wdg-content a { color: var(--violet); }

/* Accessibility: skip link */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--surface); color: var(--text); padding: 12px 18px; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

/* Quick-add "added" confirmation state from WooCommerce */
.card .added_to_cart { display: none; }

/* Language switcher (PL | EN) */
.wdg-langs { display: inline-flex; align-items: center; gap: 2px; margin-right: 4px; }
.wdg-lang {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-2); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s;
}
.wdg-lang:hover { color: #fff; background: rgba(255,255,255,.06); }
.wdg-lang.on { color: #fff; background: var(--grad); }
.drawer-foot .wdg-langs { margin: 0; }
.drawer-foot .wdg-lang { border: 1px solid var(--line-2); }

/* Real brand mark (round PNG that already carries the WIN DISC GOLF wordmark).
   Sized larger to match the original windiscgolf.pl header. The header row grows
   with it so the bigger badge doesn't get clipped. */
.logo-img {
  width: 76px;
  height: 76px;
  object-fit: contain;
  border-radius: 50%;
  filter: drop-shadow(0 4px 12px rgba(168, 85, 247, .35));
}
.logo .custom-logo { width: auto; height: 72px; }
/* Narrower header bar — logo (76px) and nav fonts unchanged; just tighter
   vertical padding so the row hugs the logo. The logo's glow can overhang. */
.hdr-in { height: 82px; }
.footer .logo-img { width: 88px; height: 88px; }
@media (max-width: 560px) {
  .logo-img { width: 58px; height: 58px; }
  .hdr-in { height: 66px; }
}

/* Social icons (Facebook / Instagram) — larger, matching the original site */
.announce .socials a svg { width: 24px; height: 24px; }
.announce .socials { gap: 18px; }
.foot-social a { width: 48px; height: 48px; }
.foot-social a svg { width: 22px; height: 22px; }

/* ============================================================
   Preview / "do not copy" mode (inc/preview.php)
   Diagonal repeating watermark + disabled text selection. A light
   deterrent only — anything rendered in a browser can still be copied.
   ============================================================ */
body.wdg-preview { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
body.wdg-preview input,
body.wdg-preview textarea { -webkit-user-select: text; user-select: text; } /* keep forms usable */

/* ============================================================
   Wide-screen centering
   Everything else sits in .wrap (max 1480px, centered) but the
   product carousels were full-bleed, so on >1480px screens the
   cards started at the screen edge while the section heading was
   centered. Constrain the carousel to the same max-width so the
   first card lines up under the heading. The .cbtn arrows are
   absolute to .carousel, so they reposition correctly too.
   ============================================================ */
.carousel {
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Brand strip placed directly under the sticky header (above hero):
   give it a touch more breathing room and a subtle top border so it
   reads as part of the header band. */
.brandstrip-top {
  margin-top: 0;
  border-top: none;
  background: var(--bg-2);
}

/* ============================================================
   Product card media band
   Real product photos are square with empty margin around the disc, which
   made cards very tall. Constrain the media to a fixed shorter band so the
   photo/disc scales to fit and the card reads wider-than-tall. (Card padding,
   title and price sizes come from layout.css — the mobile iteration made them
   smaller; we don't re-impose the old larger values here.)
   ============================================================ */
.card-media .disc-stage {
  aspect-ratio: auto;
  height: clamp(132px, 12vw, 172px);
}
/* Procedural demo disc: drive size by the band height, keep it round */
.card-media .disc-stage .disc-wrap {
  width: auto;
  height: 100%;
  aspect-ratio: 1;
}
/* Real WooCommerce photo: fill the band, never crop */
.card-media .wdg-prod-img {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
  object-fit: contain;
}
/* Clamp the title to two lines (ellipsis) so long names can't unbalance a row.
   layout.css already reserves min-height:2em; this adds the overflow safety. */
.card-title {
  line-height: 1.05;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-body {
  flex: 1;                       /* push foot (brand + price) to the bottom */
  justify-content: flex-start;
}
.card-foot { margin-top: auto; }
/* Equal-height cards in both the carousel row and the multi-row gallery */
.crail { align-items: stretch; }
.crail .cslot { display: flex; }
.crail .cslot > .card { width: 100%; display: flex; flex-direction: column; }
.pgrid > .card { display: flex; flex-direction: column; height: 100%; }

/* ============================================================
   Hero: align the two columns at the top (copy column was taller,
   so center-alignment pushed the image 44px lower than the text).
   ============================================================ */
.hero-grid { align-items: start; }
.hero-media { position: sticky; top: 0; }
@media (max-width: 820px) {
  .hero-media { position: static; }
}

/* ============================================================
   Even vertical rhythm between homepage sections.
   .block already adds top padding; normalize the bespoke sections
   (category nav, finder, feature band) to the same cadence so gaps
   don't alternate big/small.
   ============================================================ */
.catnav, .finder, .featband { margin-top: 0; }
.block + .catnav,
.block + .wrap.catnav { padding-top: clamp(48px, 6vw, 86px); }