/* الورشة الإسلامية للنجارة — inner pages (landing pages, project, store, legal). Prefix: pg-
   Builds on home.css (hp-) and components.css (ws-); same tokens, same rhythm. */

/* Hero variants */
.pg-hero-actions{align-items:center;margin-top:var(--space-8)}
.pg-hero--short{padding-block:var(--space-16)}
.pg-hero-center{max-width:760px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.pg-hero-center .ws-badge{align-self:center}
.pg-hero-center .ws-lead{margin-inline:auto}
.pg-hero-center .pg-hero-actions{justify-content:center}

/* Breadcrumbs */
.pg-crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;font:var(--text-caption);color:var(--ink-muted)}
.pg-crumbs a{color:var(--ink-muted);text-decoration:underline;text-decoration-color:var(--sawdust);text-underline-offset:4px}
.pg-crumbs a:hover{color:var(--oud)}

/* "Who are you" cards: each one opens the questionnaire */
.pg-who{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8) var(--space-6);background:var(--canvas);color:var(--oud);text-decoration:none;box-shadow:inset 0 0 0 var(--hairline) var(--sawdust),inset 0 calc(-1 * var(--plank-edge)) 0 var(--wood);transition:box-shadow .15s}
.pg-who:hover{box-shadow:inset 0 0 0 1.5px var(--wood),inset 0 calc(-1 * var(--plank-edge)) 0 var(--machine-green)}
.pg-who:focus-visible{outline:2px solid var(--oud);outline-offset:3px}
.pg-who p{margin:0}
.pg-who__k{font:600 13px/1.6 var(--font-body);color:var(--ink-muted)}
.pg-who__t{margin:0;font:400 28px/1.3 var(--font-display)}
.pg-who__go{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-4);font:var(--text-label)}
.pg-who__go .ws-icon{transition:transform .15s}
.pg-who:hover .pg-who__go .ws-icon{transform:translateX(-4px)}

/* Why us */
.pg-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.pg-why li{display:flex;flex-direction:column;gap:var(--space-2);padding-top:var(--space-4);border-top:var(--plank-edge) solid var(--wood)}
.pg-why b{font:400 24px/1.3 var(--font-display);color:var(--oud)}
.pg-why span{font:var(--text-body)}

/* Small closing line with a link */
.pg-more{margin:var(--space-8) 0 0;font:var(--text-body)}

/* Project gallery: photos keep their own shape */
.pg-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);align-items:start}
.pg-gallery figure{margin:0}
.pg-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pg-gallery figure:only-child,.pg-gallery figure:nth-child(2):last-child{grid-column:span 1}

/* Store product */
.pg-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3) var(--space-6);margin:var(--space-6) 0 0}
.pg-specs div{display:flex;flex-direction:column;padding-top:var(--space-2);border-top:var(--hairline) solid var(--sawdust)}
.pg-specs dt{font:var(--text-caption);color:var(--ink-muted)}
.pg-specs dd{margin:0;font:500 16px/1.6 var(--font-body)}
.pg-specs__rest{grid-column:1 / -1}
.pg-note{margin:var(--space-3) 0 0;font:var(--text-caption);color:var(--ink-muted)}
.pg-product .hp-display{font-size:52px}
.pg-back{padding-block:var(--space-12)}
.pg-back .pg-more{margin:0;text-align:center}

/* Legal pages */
.pg-legal-text{max-width:var(--measure)}
.pg-legal-text h2{margin:var(--space-12) 0 var(--space-3);font:var(--text-h2);color:var(--oud)}
.pg-legal-text h2:first-child{margin-top:0}
.pg-legal-text p,.pg-legal-text li{font:var(--text-body)}
.pg-legal-text p{margin:0 0 var(--space-3)}
.pg-legal-text ul{margin:0 0 var(--space-3);padding-inline-start:var(--space-6)}
.pg-updated{margin-top:var(--space-12)!important;font:var(--text-caption)!important;color:var(--ink-muted)}

/* Footer: legal links on the base line */
.pg-legal a{color:var(--sawdust);text-decoration:underline;text-underline-offset:4px}
.pg-legal a:hover{color:var(--paper)}

@media (max-width:960px){
  .pg-why{grid-template-columns:minmax(0,1fr)}
  .pg-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-product .hp-display{font-size:44px}
}
@media (max-width:600px){
  .pg-hero--short{padding-block:var(--space-8) var(--space-12)}
  .pg-gallery{grid-template-columns:minmax(0,1fr)}
  .pg-gallery img{aspect-ratio:auto}
  .pg-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-product .hp-display{font-size:36px}
  .pg-hero-actions .ws-link{width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.pg-who,.pg-who__go .ws-icon{transition:none}}