/* ============================================================================
   AEDIL — Component Pattern Classes
   Copy-paste ready CSS classes for the ~15 recurring patterns across the
   brand system. Depends on colors_and_type.css for tokens.

   Usage:
     <link rel="stylesheet" href="colors_and_type.css">
     <link rel="stylesheet" href="aedil-components.css">

   Organized into:
     1. Layout primitives (slide-canvas, grid, container)
     2. Surfaces (the 4 card recipes: anchor/stat/hero/ink)
     3. Buttons (primary/dark/ghost/text)
     4. Typography patterns (headline-emphasis, eyebrow variants, big-numeral)
     5. Brand chrome (corner-mark, breadcrumb, wordmark slot)
     6. Form primitives (input, select, checkbox-tile)
     7. Badges & chips
     8. Motion utilities (focus-ring, hover transitions)

   Philosophy: name the patterns that actually exist in the deck/system.
   Do not add Tailwind-style utility sprawl.
   ============================================================================ */


/* ====================================================================
   1 · LAYOUT PRIMITIVES
   ==================================================================== */

/* Slide canvas — 1920×1080, for decks. Pair with deck-stage.js starter. */
.aedil-slide {
  position: relative;
  width: 1920px; height: 1080px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: var(--font-body);
}
.aedil-slide--ink   { background: var(--aedil-ink-800); color: #F5F5F5; }
.aedil-slide--white { background: var(--aedil-ink-200); color: var(--aedil-ink-900); }

/* Standard slide edge padding per brand grid (96px) */
.aedil-slide__pad { padding: 96px; box-sizing: border-box; }

/* Landing / page container — 1120 default, 720 narrow, 1440 wide */
.aedil-container        { max-width: var(--content-base);   margin: 0 auto; padding: 0 24px; }
.aedil-container--narrow{ max-width: var(--content-narrow); margin: 0 auto; padding: 0 24px; }
.aedil-container--wide  { max-width: var(--content-wide);   margin: 0 auto; padding: 0 32px; }

/* Section rhythm — alternate band backgrounds by adding modifier to section */
.aedil-section        { padding: 96px 0; }
.aedil-section--tight { padding: 64px 0; }
.aedil-section--ink   { background: var(--aedil-ink-800); color: #F5F5F5; }
.aedil-section--white { background: var(--aedil-ink-200); color: var(--aedil-ink-900); }

/* 8-col grid, 32px gutter — the deck grid, also usable on landings */
.aedil-grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 32px;
}
.aedil-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.aedil-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.aedil-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }


/* ====================================================================
   2 · SURFACES — the 4 card recipes
   Never combine two ornaments; never two gradients on one card.
   ==================================================================== */

/* 2a · Stat card — white, 16r, 1px hairline. DEFAULT card on light surfaces. */
.aedil-card-stat {
  background: #FFFFFF;
  border: 1px solid var(--aedil-ink-300);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.aedil-card-stat:hover {
  border-color: #BDBDBD;
  box-shadow: var(--shadow-2);
}
/* Adapter variant — for the "winner" side of a comparison. ONLY here. */
.aedil-card-stat--adapter {
  border-left: 3px solid var(--aedil-yellow-500);
}

/* 2b · Anchor card — dark fill, grounds a section on light canvas.
       Pair with .aedil-anchor-shadow sibling for the blurred ink-fade strip. */
.aedil-card-anchor {
  background: var(--aedil-ink-700);
  color: #F5F5F5;
  border-radius: var(--radius-xl);
  padding: 40px 48px;
  position: relative;
}
.aedil-anchor-shadow {
  background: var(--grad-ink-fade);
  height: 24px;
  opacity: 0.5;
  filter: blur(12px);
  transform: translateY(-8px);
}

/* 2c · Hero card — gold→silver gradient fill. ONE per slide/section. */
.aedil-card-hero {
  background: var(--grad-gold-to-silver);
  color: var(--aedil-ink-900);
  border-radius: var(--radius-xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
}

/* 2d · Ink ornament card — dark atmospheric piece. ONE ornament top-right. */
.aedil-card-ink {
  background: var(--aedil-ink-800);
  color: #F5F5F5;
  border-radius: var(--radius-xl);
  padding: 40px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-dark-2);
}
.aedil-card-ink .aedil-eyebrow { color: var(--aedil-yellow-500); }


/* ====================================================================
   3 · BUTTONS
   44px min hit target, 2px focus ring.
   ==================================================================== */

.aedil-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--radius-sm);
  font: 600 15px/1 var(--font-body);
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color            var(--dur-fast) var(--ease-out),
              box-shadow       var(--dur-fast) var(--ease-out),
              border-color     var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.aedil-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.aedil-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — yellow fill, ink-900 text. The CTA. */
.aedil-btn--primary {
  background: var(--aedil-yellow-500);
  color: var(--aedil-ink-900);
}
.aedil-btn--primary:hover  { background: var(--aedil-yellow-700); }
.aedil-btn--primary:active { background: var(--aedil-yellow-900); color: #FFFFFF; }

/* Dark — ink-900 fill, for secondary CTAs on light surfaces */
.aedil-btn--dark {
  background: var(--aedil-ink-900);
  color: #FFFFFF;
}
.aedil-btn--dark:hover  { background: var(--aedil-ink-700); }
.aedil-btn--dark:active { background: var(--aedil-ink-800); }

/* Ghost — transparent with 1px border */
.aedil-btn--ghost {
  background: transparent;
  color: var(--aedil-ink-900);
  border: 1px solid var(--aedil-ink-300);
  padding: 0 19px;
}
.aedil-btn--ghost:hover { border-color: #BDBDBD; background: rgba(13,13,13,0.03); }

/* Ghost on dark surface */
.aedil-btn--ghost-dark {
  background: transparent;
  color: #F5F5F5;
  border: 1px solid #3A3A3A;
  padding: 0 19px;
}
.aedil-btn--ghost-dark:hover { border-color: #656567; background: rgba(255,255,255,0.04); }

/* Text — no chrome, lightest weight */
.aedil-btn--text {
  background: transparent;
  color: var(--aedil-ink-500);
  padding: 0 14px;
}
.aedil-btn--text:hover { color: var(--aedil-ink-900); }

/* Hero CTA — yellow with gold glow. Reserved for the ONE primary action. */
.aedil-btn--hero {
  background: var(--aedil-yellow-500);
  color: var(--aedil-ink-900);
  box-shadow: var(--glow-gold);
  padding: 0 28px;
  min-height: 52px;
  font-size: 16px;
}
.aedil-btn--hero:hover { background: var(--aedil-yellow-700); }

/* Sizes */
.aedil-btn--sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.aedil-btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }


/* ====================================================================
   4 · TYPOGRAPHY PATTERNS
   ==================================================================== */

/* Signature headline — one noun phrase in yellow (wrap in <em>) */
.aedil-headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 5vw, var(--fs-display-m));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
  text-wrap: balance;
  margin: 0;
}
.aedil-headline em {
  font-style: normal;
  color: var(--aedil-yellow-500);
  font-weight: 700;
}
.aedil-slide--ink .aedil-headline { color: #FFFFFF; }

/* Big numeral — the 96–180px yellow stat */
.aedil-numeral {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(5rem, 12vw, 180px);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--aedil-yellow-500);
  display: inline-block;
}
.aedil-numeral .unit {
  font-size: 0.36em;
  vertical-align: top;
  margin-left: 4px;
  color: var(--aedil-yellow-700);
  letter-spacing: -0.02em;
}

/* Eyebrow variants — small ALL-CAPS label */
.aedil-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--aedil-ink-500);
  display: inline-block;
}
.aedil-eyebrow--yellow { color: var(--aedil-yellow-500); }
.aedil-eyebrow--ink    { color: var(--aedil-ink-900); }
.aedil-eyebrow--rule {
  /* eyebrow prefixed with a 40×2 yellow dash */
}
.aedil-eyebrow--rule::before {
  content: "";
  display: inline-block;
  width: 40px; height: 2px;
  background: var(--aedil-yellow-500);
  vertical-align: middle;
  margin-right: 16px;
}

/* Breadcrumb — "Section / subsection" with yellow active */
.aedil-breadcrumb {
  font: 600 14px/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aedil-ink-500);
  display: flex;
  align-items: center;
  gap: 10px;
}
.aedil-breadcrumb .sep { color: #6A6A6A; }
.aedil-breadcrumb .now { color: var(--aedil-yellow-500); }
.aedil-slide--white .aedil-breadcrumb .now,
.aedil-section--white .aedil-breadcrumb .now { color: var(--aedil-ink-900); }

/* Pull quote — oversized, with a 40px yellow top rule */
.aedil-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3.5vw, 3rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  text-wrap: balance;
  position: relative;
  padding-top: 24px;
}
.aedil-quote::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 64px; height: 2px;
  background: var(--aedil-yellow-500);
}
.aedil-quote em {
  color: var(--aedil-yellow-500);
  font-style: normal;
  font-weight: 600;
}


/* ====================================================================
   5 · BRAND CHROME
   ==================================================================== */

/* Corner mark — AEDIL A silhouette in a slide corner. 
   SVG inside uses currentColor; wrap the svg in this box. */
.aedil-corner-mark {
  position: absolute;
  top: 56px; right: 88px;
  width: 60px; height: 50px;
  color: var(--aedil-yellow-500);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aedil-corner-mark svg {
  width: 100%; height: 100%;
  display: block;
  fill: currentColor;
}
.aedil-slide--white .aedil-corner-mark,
.aedil-section--white .aedil-corner-mark { color: var(--aedil-ink-900); }

/* Wordmark slot — consistent sizing for the top-left logo */
.aedil-wordmark { display: inline-block; height: 32px; }
.aedil-wordmark img { height: 100%; width: auto; display: block; }
.aedil-wordmark--lg { height: 48px; }
.aedil-wordmark--slide { height: 56px; }

/* Page number — tiny meta in bottom-right of slides */
.aedil-page-num {
  position: absolute;
  right: 88px; bottom: 56px;
  font: 500 14px/1 var(--font-mono);
  color: var(--aedil-ink-400);
  letter-spacing: 0.04em;
}

/* Divider rule — the 40×2 yellow mark used between sections */
.aedil-divider {
  display: block;
  width: 64px; height: 2px;
  background: var(--aedil-yellow-500);
  border: 0;
  margin: 24px 0;
}


/* ====================================================================
   6 · FORM PRIMITIVES
   ==================================================================== */

.aedil-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  border: 1px solid var(--aedil-ink-300);
  border-radius: var(--radius-sm);
  font: 400 15px/1 var(--font-body);
  color: var(--aedil-ink-900);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow   var(--dur-fast) var(--ease-out);
}
.aedil-input::placeholder { color: var(--aedil-ink-400); }
.aedil-input:hover { border-color: #BDBDBD; }
.aedil-input:focus {
  outline: none;
  border-color: var(--aedil-yellow-500);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.aedil-label {
  display: block;
  font: 600 13px/1.3 var(--font-body);
  color: var(--aedil-ink-800);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

.aedil-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}


/* ====================================================================
   7 · BADGES, CHIPS, PILLS
   ==================================================================== */

.aedil-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 600 11px/1 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--aedil-ink-200);
  color: var(--aedil-ink-800);
  border: 1px solid var(--aedil-ink-300);
}
.aedil-badge--yellow { background: var(--aedil-yellow-500); color: var(--aedil-ink-900); border-color: var(--aedil-yellow-700); }
.aedil-badge--ink    { background: var(--aedil-ink-900); color: #FFFFFF; border-color: transparent; }
.aedil-badge--ghost  { background: transparent; }

/* Agent chip — used in layer-system (Porta/Curio/Aquila) */
.aedil-chip-agent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  font: 600 14px/1 var(--font-body);
  color: var(--aedil-ink-900);
  box-shadow: var(--shadow-1);
}
.aedil-chip-agent::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aedil-yellow-500);
}


/* ====================================================================
   8 · MOTION UTILITIES
   ==================================================================== */

/* Subtle rise-on-hover for interactive cards */
.aedil-rise {
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.aedil-rise:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
}

/* Fade-in on page load for hero content */
@keyframes aedil-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.aedil-fade-up        { animation: aedil-fade-up 520ms var(--ease-out) both; }
.aedil-fade-up--d1    { animation-delay: 120ms; }
.aedil-fade-up--d2    { animation-delay: 240ms; }
.aedil-fade-up--d3    { animation-delay: 360ms; }

/* Active/learning dot with gold pulse */
@keyframes aedil-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,183,7,0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(242,183,7,0); }
}
.aedil-pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--aedil-yellow-500);
  animation: aedil-pulse 2s var(--ease-out) infinite;
}


/* ====================================================================
   9 · RESPONSIVE BEHAVIOR
   Landing pages only; decks are fixed canvas via deck-stage.js.
   ==================================================================== */

@media (max-width: 960px) {
  .aedil-grid-3, .aedil-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .aedil-section { padding: 64px 0; }
  .aedil-card-anchor, .aedil-card-ink { padding: 32px 28px; }
  .aedil-card-hero { padding: 36px 28px; }
}
@media (max-width: 640px) {
  .aedil-grid-2, .aedil-grid-3, .aedil-grid-4 { grid-template-columns: 1fr; }
  .aedil-container { padding: 0 20px; }
  .aedil-section { padding: 48px 0; }
}