/* ==========================================================================
   Nishtech 2026 — PLATFORM PAGES
   --------------------------------------------------------------------------
   One component: "Why Nishtech for <platform>". Ported from section.why in
   the SitecoreAI Readiness Audit proposal (sitecoreaireadinessv2.pages.dev),
   keeping the design and UX as-is and swapping the proposal's own type and
   colour for the 2026 tokens.

   Source spec, read off the proposal's stylesheet:

     section.why      background --indigo-deep, relative, overflow hidden
     .cover-grid      inset 0, opacity .05, radial dot grid 34px
     .why-glow        520px circle, top -10% / right -6%,
                      radial-gradient(rgba(255,120,0,.2) -> transparent 70%)
     .why-wrap        grid 1fr 1fr, gap 56, align-items center
     .section-eyebrow 11px/800/.14em uppercase orange, ::before 26x2 rule
     .why-title       serif clamp(1.9rem,3.4vw,2.7rem), #fff, lh 1.12, mb 22
     .accent          orange italic
     .why-lead        rgba(255,255,255,.62), 1.05rem, lh 1.7, mb 30
     .why-stats       grid 1fr 1fr, gap 14
     .why-stat        bg .05 white, border .09 white, radius 12, pad 18/20
     .why-stat .n     serif 2.1rem orange, lh 1
     .why-stat .l     11px/700/.05em uppercase rgba(255,255,255,.55), mt 8
     .badges          grid 1fr 1fr 1fr, gap 10, align-items start
     .cred-badge      aspect 460/412, radius 14, bg #fff, shadow 0 8px 22px/.28

   Token substitutions: 'DM Serif Display' -> --font-display, Catamaran ->
   --font-body, and the literal #FF7800 / #0D0B2E map onto --orange and
   --indigo-deep, which already carry those exact values.

   Prefixed .pw-* (platform-why) rather than reusing .why-*, because
   main-2026.css already owns a .why block on the homepage.
   ========================================================================== */

.pw{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--indigo-deep);
  padding-block:var(--space-section);
}
/* Dot grid and glow are decorative; they sit behind content on their own
   layer so the section can stay a normal flow container. */
.pw__grid{
  position:absolute;inset:0;z-index:-2;opacity:.05;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1px,transparent 1px);
  background-size:34px 34px;
}
.pw__glow{
  position:absolute;top:-10%;right:-6%;z-index:-1;pointer-events:none;
  width:min(520px,60vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,0,.2),transparent 70%);
}

.pw__wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.4vw,7rem);align-items:center}

/* Eyebrow with its leading rule — the proposal draws this as a flex row with
   a 26x2 bar, which is the same treatment the 2026 hero eyebrow uses. */
.pw__eyebrow{
  display:flex;align-items:center;gap:11px;margin:0 0 1rem;
  font-family:var(--font-body);font-size:var(--fs-kicker);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);
}
.pw__eyebrow::before{content:'';display:block;width:26px;height:2px;background:var(--orange);flex:none}

.pw__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.12;color:#fff;
  margin:0 0 1.375rem;
}
.pw__title .accent{color:var(--orange);font-style:italic}

.pw__lead{
  font-size:var(--fs-body);line-height:1.7;color:rgba(255,255,255,.62);
  margin:0 0 1.875rem;
}

/* --- Stat tiles: 4 to 6, always two columns ------------------------------ */
.pw__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pw__stat{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:12px;padding:18px 20px;
}
.pw__n{
  font-family:var(--font-display);font-size:2.1rem;line-height:1;
  color:var(--orange);
}
.pw__l{
  font-size:var(--fs-kicker);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
  margin-top:8px;line-height:1.35;
}

/* --- Badge rail ----------------------------------------------------------
   The proposal only ever shows six. Platform coverage is uneven here, so the
   rail adapts to what a platform actually has rather than padding the grid
   with blanks: Sitecore has six certifications, Optimizely three, and the
   newer partnerships one apiece.

   Set via a `--pw-cols` custom property from the template, so the count lives
   with the data rather than as a class the author has to remember.
   ------------------------------------------------------------------------ */
.pw__badges{
  display:grid;grid-template-columns:repeat(var(--pw-cols,3),minmax(0,1fr));
  gap:10px;align-items:start;
}
/* The badge PNGs are white cards with a 2px hairline border and rounded
   corners carried in the alpha channel. Two consequences, both learned the
   hard way:

   1. Never flatten them. Compositing that alpha onto an opaque background
      turns the transparent corner arcs into solid colour — black, if you let
      PIL pick the default — which shows as notches at each corner. The files
      are stored verbatim with alpha intact; `background:#fff` below supplies
      the card and `border-radius` clips the same corners the artwork does.

   2. Don't resize them to match each other. The Technology MVP badge ships
      square (600×600) where the rest are 460×412. Letterboxing it into the
      common box insets its own 2px border 24px from each side, which reads as
      a grey rectangle floating inside the card. Cropping clips the border top
      and bottom instead. Neither is better than leaving it alone — `cover` on
      a square source trims a little of its own edge and the CSS card provides
      the visual boundary regardless. This is how the source proposal ships it. */
/* The card is a wrapper, not the image. Two kinds of thing go inside it:

   Full-bleed badge artwork (the Sitecore set, the placeholders) already
   contains its own white card, so it fills the wrapper edge to edge.

   A partner logo is a different animal — Vercel's mark is 186×46 and
   TradeCentric's 180×39. Letting object-fit:contain scale those to fill the
   card upscales them about 2× and they go soft, which is exactly the fuzziness
   the client logos had. Logos instead sit centred at their native height,
   capped from the data, on the card's white ground. */
.pw__badge{
  width:100%;aspect-ratio:460/412;overflow:hidden;
  display:grid;place-items:center;
  border-radius:14px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.28);
}
.pw__badge img{width:100%;height:100%;object-fit:cover;display:block}
.pw__badge .pw__logo{
  width:auto;height:auto;max-width:64%;object-fit:contain;
}
/* A single credential shouldn't be a lonely third of a rail. */
.pw__badges--one{--pw-cols:1;max-width:min(100%,26rem);margin-inline:auto}


/* ==========================================================================
   BREAKPOINTS
   The proposal collapses at 960 (single column, badges to 2-up) and 460
   (badges to 1-up). Kept, expressed against this project's breakpoints.
   ========================================================================== */
@media (max-width:1023.98px){
  .pw__wrap{grid-template-columns:1fr;gap:2.375rem}
  .pw__badges{--pw-cols:3}
  .pw__badges--one{--pw-cols:1}
}

@media (max-width:767.98px){
  .pw__stats{grid-template-columns:1fr}
  .pw__badges{--pw-cols:2}
  .pw__badges--one{--pw-cols:1}
  .pw__glow{width:min(320px,70vw)}
}

@media (max-width:479.98px){
  .pw__badges{--pw-cols:1}
  .pw__badge{max-width:20rem;margin-inline:auto}
}

/* No prefers-reduced-motion rule here on purpose. The dot grid and the glow
   are static decoration with nothing animating, and that query is about
   motion — hiding them would be answering a question nobody asked. */