/* PENTA Defence — catalogue pages (products, blog, simulator).
   Adds rules on top of base.css using its tokens only; never redefines tokens or base classes. */

/* ================= Shared ================= */
.btn-ghost.is-solid { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-ghost.is-solid:hover { background: var(--accent-light); border-color: var(--accent-light); }
.page-hero .actions .btn-ghost { margin-top: 0; }
.paper > .wrap > .notice { margin-bottom: 24px; }

/* ================= Products ================= */
/* Category quick links in the hero */
.cat-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-nav .btn-ghost { margin-top: 0; padding: 5px 14px; font-size: 13px; }

/* Category sections: heading on paper, full-bleed photo tiles below */
.cat-paper { padding-top: 0; }
.cat-section { position: relative; scroll-margin-top: var(--hdr-h, 66px); padding-top: clamp(56px, 6vw, 104px); }
.cat-section .section-head { margin-bottom: clamp(24px, 2.6vw, 40px); }
.cat-section .section-head .eyebrow { margin-bottom: 14px; }

.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--gap); }
/* Stacked tile: picture band on top, text on the dark tile below, so the product is never covered */
.cat-tile { aspect-ratio: 5 / 4; }
.cat-tile .prod-media { inset: 0 0 auto 0; height: 64%; }
.cat-tile .prod-media::after { background: linear-gradient(0deg, #04060B 0%, #04060B00 38%); }
.cat-tile .prod-plate { object-position: 70% 8%; }
.cat-tile .prod-cutout { right: 50%; top: 50%; transform: translate(50%, -50%); max-width: 72%; max-height: 82%; }
.cat-tile .cat-name, .cat-tile .prod-sub { font-family: var(--font-display); font-weight: 450; font-size: clamp(24px, 1.8vw, 36px); line-height: 1.06; letter-spacing: var(--track-head); color: var(--on-dark); }
.cat-tile .prod-sub { color: var(--muted); }
.cat-tile .prod-spec { gap: 4px 18px; margin-top: 14px; }
.cat-tile .btn-ghost { margin-top: 16px; }
/* An odd last tile spans the row like the wide home tiles (text over the picture, product on the right) */
@media (min-width: 1101px) {
  .cat-grid .cat-tile:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 1808 / 847; }
  .cat-grid .cat-tile:last-child:nth-child(odd) .prod-media { inset: 0; height: auto; }
  .cat-grid .cat-tile:last-child:nth-child(odd) .prod-media::after { background: linear-gradient(0deg, #04060Bd9 0%, #04060B66 28%, transparent 52%), linear-gradient(90deg, #04060B66 0%, transparent 46%); }
  .cat-grid .cat-tile:last-child:nth-child(odd) .prod-cutout { right: 8%; top: 50%; transform: translateY(-50%); max-height: 70%; max-width: 46%; }
  .cat-grid .cat-tile:last-child:nth-child(odd) .prod-text { max-width: 50%; }
  .cat-grid .cat-tile:last-child:nth-child(odd) .cat-mark { left: auto; right: 6%; top: 42%; transform: translateY(-50%); max-width: 60%; text-align: right; }
}
/* Text-only tile (no verified product photo yet): typographic mark, never a stand-in picture */
.cat-mark {
  position: absolute; left: 6%; right: 6%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 500; font-size: clamp(56px, 6vw, 120px); line-height: .9; letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1px #C9A24B66; text-align: center; overflow-wrap: anywhere;
}

/* Product page hero with the real cutout shown large (no composite banner) */
.product-hero.has-cutout { min-height: clamp(560px, 82vh, 900px); }
.product-hero.has-cutout .page-hero-inner { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.product-hero.has-cutout .page-hero-inner > :not(.ph-cutout) { position: relative; z-index: 1; max-width: 52%; }
.ph-cutout { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; margin: 0; display: flex; align-items: center; justify-content: center; }
.ph-cutout::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 8%; height: 18%; background: radial-gradient(ellipse 50% 50% at 50% 50%, #C9A24B3d 0, transparent 70%); }
/* width/height auto + max-* : the cutout is never shown larger than its native pixels */
.ph-cutout img { position: relative; width: auto; height: auto; max-width: 100%; max-height: 88%; object-fit: contain; filter: drop-shadow(0 30px 40px #000a); }

.product-overview { margin-top: 24px; }
.product-overview .lead-xl { margin: 0; font-size: clamp(24px, 2vw, 38px); line-height: 1.15; }
.ph-mark { left: auto; top: auto; right: 0; bottom: 0; transform: none; max-width: 55%; font-size: clamp(80px, 12vw, 240px); text-align: right; }
.product-body { margin-top: clamp(32px, 4vw, 56px); }
.product-photo { margin: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: clamp(16px, 2vw, 32px); }
.product-photo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 20px 28px #0008); }

@media (max-width: 1100px) {
  .cat-grid { grid-template-columns: 1fr; }
  .cat-tile { aspect-ratio: 3 / 2; }
}
@media (max-width: 767px) {
  .cat-tile { aspect-ratio: 3 / 4; }
  .cat-tile .prod-media { height: 52%; }
  .cat-tile .prod-spec div:nth-child(n+3) { display: none; }
  .cat-mark { font-size: 64px; }
  .cat-tile .btn-ghost { margin-top: 14px; }
  .product-hero.has-cutout { min-height: 0; }
  .ph-mark { display: none; }
  .product-hero.has-cutout .page-hero-inner > :not(.ph-cutout) { max-width: none; }
  .ph-cutout { position: relative; order: -1; width: auto; height: 34vh; min-height: 220px; margin: 0 0 20px; }
}

/* ================= Blog ================= */
.post-grid { row-gap: clamp(32px, 3vw, 48px); }
.post-card { display: flex; flex-direction: column; }
.post-card .news-title { font-size: clamp(20px, 1.45vw, 26px); }
.post-excerpt { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-reading { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
.pager { flex-wrap: wrap; }
.pager span[aria-current] { font-weight: 500; }

.post-empty { max-width: 860px; gap: 16px; }
.post-empty h2 { font-size: clamp(26px, 2.4vw, 40px); line-height: 1.1; font-weight: 450; }
.post-empty p { font-size: 18px; max-width: 62ch; }
.post-empty .tags { margin-top: 4px; padding-top: 0; }
.post-empty .actions { margin-top: 8px; }

.post-hero .page-lead { max-width: 760px; }
.post-hero h1 { max-width: 22ch; font-size: clamp(38px, 4.6vw, 88px); line-height: 1; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: 26px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--on-dark); }
.post-credit { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }

.post-layout { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.post-layout > .post-main:only-child { grid-column: 1 / -1; }
.post-toc { position: sticky; top: calc(var(--hdr-h, 66px) + 24px); padding-top: 4px; }
.post-toc ol { margin-top: 14px; border-top: 1px solid var(--divider); }
.post-toc li { border-bottom: 1px solid var(--divider); }
.post-toc a { display: block; padding: 10px 0; font-size: 15px; line-height: 1.35; color: var(--ink); }
.post-toc a:hover { color: var(--accent-text); }
.post-toc .toc-l3 a { padding-left: 14px; font-size: 14px; color: var(--body); }
.post-body > :first-child { margin-top: 0; }
.post-body h2, .post-body h3 { scroll-margin-top: calc(var(--hdr-h, 66px) + 16px); }
.post-sources { max-width: 72ch; margin-top: clamp(40px, 4vw, 64px); padding-top: 24px; border-top: 1px solid var(--divider); }
.post-sources ol { margin-top: 14px; counter-reset: src; }
.post-sources li { counter-increment: src; display: grid; grid-template-columns: 30px 1fr; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 15px; line-height: 1.45; }
.post-sources li::before { content: counter(src, decimal-leading-zero); grid-row: span 2; font-family: var(--font-mono); font-size: 12px; line-height: 22px; color: var(--accent-text); }
.post-sources a { color: var(--ink); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--divider); text-underline-offset: 3px; }
.post-sources a:hover { text-decoration-color: var(--accent); }
.post-sources span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--body); }

/* Related products: small dark tiles with the real cutout */
.mini-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mini-tile { display: flex; flex-direction: column; background: var(--raised); box-shadow: 0 0 0 1px var(--card-edge); transition: box-shadow .2s; }
a.mini-tile:hover { box-shadow: 0 0 0 1px var(--accent); }
.mini-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; padding: 18px; overflow: hidden; background: radial-gradient(ellipse 45% 16% at 50% 84%, #C9A24B2e 0, transparent 70%), linear-gradient(180deg, #0F1E3D 0%, #091530 55%, #04060B 100%); }
.mini-media img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px #000a); }
.mini-media .cat-mark { right: 18px; left: 18px; top: 50%; max-width: none; font-size: 48px; }
.mini-text { padding: 16px 18px 20px; }
.mini-text h3 { font-size: 20px; line-height: 1.2; font-weight: 500; }
.mini-text p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--body); }

/* ================= Simulator ================= */
.game-cta { margin-top: 28px; }
.game-sub { margin-bottom: 14px; font-family: var(--font-mono); font-size: 14px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.game-sub + .lines { max-width: none; }
ol.grid-4 .card p { color: var(--ink); }
.lb-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.lb-table th, .lb-table td { padding: 11px 0; border-bottom: 1px solid var(--divider); text-align: left; }
.lb-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--body); }
.lb-table td { color: var(--ink); font-size: 16px; }
.lb-table td:first-child { width: 56px; font-family: var(--font-mono); color: var(--accent-text); }
.lb-table .num { text-align: right; font-family: var(--font-mono); }
.badge-card { gap: 8px; }
.badge-icon { font-size: 34px; line-height: 1; }
.badge-card h3 { font-size: 20px; }
.game-disclaimer { max-width: 900px; }
.game-disclaimer .eyebrow { margin-bottom: 8px; }
.game-disclaimer p { font-size: 16px; line-height: 1.55; color: var(--body); }

@media (max-width: 1024px) {
  .post-layout { grid-template-columns: 1fr; }
  .post-toc { position: static; }
}
@media (max-width: 767px) {
  .post-meta { font-size: 12px; }
  .lb-table td { font-size: 15px; }
}