/* ============================================================
   FUNDAMIR · COMPONENT STYLES
   Class layer for the reusable primitives. Shipped to consumers
   via styles.css so hover / focus / glow states work everywhere.
   All values pull from tokens.
   ============================================================ */

/* ---------- BUTTON ---------- */
.fdm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-sm);
  letter-spacing:var(--ls-wide);text-transform:uppercase;white-space:nowrap;
  padding:.85rem 1.5rem;border-radius:var(--radius-md);border:1px solid transparent;
  cursor:pointer;text-decoration:none;user-select:none;
  transition:transform var(--dur-fast) var(--ease-out),
             background var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.fdm-btn svg{width:1.15em;height:1.15em}
.fdm-btn:disabled,.fdm-btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.fdm-btn--primary{background:var(--red-500);color:var(--white);box-shadow:var(--glow-red-sm)}
.fdm-btn--primary:hover{background:var(--red-400);box-shadow:var(--glow-red-lg);transform:translateY(-1px)}
.fdm-btn--primary:active{background:var(--red-600);box-shadow:var(--glow-red-sm);transform:translateY(0) scale(.985)}
.fdm-btn--secondary{background:rgba(20,16,17,.6);color:var(--white);border-color:var(--border-strong);backdrop-filter:blur(6px)}
.fdm-btn--secondary:hover{border-color:var(--red-500);background:rgba(143,7,13,.18);box-shadow:var(--glow-red-sm);color:var(--white)}
.fdm-btn--secondary:active{transform:scale(.985)}
.fdm-btn--ghost{background:transparent;color:var(--text-body)}
.fdm-btn--ghost:hover{color:var(--brand);background:rgba(143,7,13,.12)}
.fdm-btn--sm{padding:.55rem 1rem;font-size:var(--fs-xs)}
.fdm-btn--lg{padding:1.05rem 2rem;font-size:var(--fs-base)}
.fdm-btn--block{display:flex;width:100%}
.fdm-btn--icon{padding:.7rem;aspect-ratio:1;border-radius:var(--radius-md)}

/* ---------- HEX BADGE ---------- */
.fdm-hex{
  width:56px;height:56px;flex:0 0 auto;
  display:grid;place-items:center;position:relative;color:var(--brand-glow);
}
.fdm-hex::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,var(--black-700),var(--black-850));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:inset 0 0 0 1.5px var(--red-500);
  filter:drop-shadow(0 0 10px rgba(245,35,47,.45));
}
.fdm-hex > *{position:relative;z-index:1}
.fdm-hex svg{width:45%;height:45%}
.fdm-hex--sm{width:40px;height:40px}
.fdm-hex--lg{width:76px;height:76px}
.fdm-hex--solid::before{background:var(--red-500);box-shadow:none;filter:drop-shadow(0 0 14px rgba(245,35,47,.55))}
.fdm-hex--solid{color:var(--white)}

/* ---------- TAG / EYEBROW ---------- */
.fdm-tag{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-sans);font-weight:var(--fw-semibold);font-size:var(--fs-xs);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--brand);
}
.fdm-tag--line::after{content:"";display:inline-block;width:38px;height:1px;background:linear-gradient(90deg,var(--red-500),transparent)}
.fdm-tag--chip{padding:.4rem .8rem;border:1px solid var(--border-brand);border-radius:var(--radius-pill);color:var(--text-body);background:rgba(143,7,13,.14)}
.fdm-tag--dotsep{gap:.5em}

/* ---------- BADGE ---------- */
.fdm-badge{
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--font-sans);font-weight:var(--fw-bold);font-size:var(--fs-2xs);
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--radius-sm);
}
.fdm-badge--red{background:var(--red-900);color:var(--red-200);border:1px solid var(--red-700)}
.fdm-badge--amber{background:var(--warning-bg);color:var(--amber-400);border:1px solid var(--amber-600)}
.fdm-badge--success{background:var(--success-bg);color:var(--success-500);border:1px solid #1c6b3f}
.fdm-badge--neutral{background:var(--black-700);color:var(--grey-200);border:1px solid var(--border-strong)}

/* ---------- CRIME TAPE ---------- */
.fdm-tape{
  display:flex;align-items:center;justify-content:center;gap:2rem;overflow:hidden;
  background:var(--amber-500);color:#1a1205;
  font-family:var(--font-sans);font-weight:var(--fw-extrabold);font-size:1rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.6rem 0;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.fdm-tape--red{background:var(--red-500);color:var(--white)}
.fdm-tape span{white-space:nowrap;opacity:.92}
.fdm-tape--angled{transform:rotate(-3deg)}

/* ---------- FEATURE CARD ---------- */
.fdm-card{
  position:relative;display:flex;flex-direction:column;gap:var(--space-4);
  padding:var(--space-6);border-radius:var(--radius-lg);
  background:var(--card-glass);backdrop-filter:var(--card-glass-blur);
  border:var(--card-border);box-shadow:var(--shadow-lg);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.fdm-card--interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--glow-red-md);border-color:var(--border-brand-lit)}
.fdm-card__title{font-family:var(--font-sans);font-weight:var(--fw-extrabold);text-transform:uppercase;font-size:var(--fs-h4);letter-spacing:.02em;color:var(--text-strong)}
.fdm-card__body{color:var(--text-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.fdm-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.fdm-card__list li{display:flex;align-items:center;gap:.6rem;color:var(--text-body);font-size:var(--fs-sm)}
.fdm-card__list li svg{width:1.05em;height:1.05em;color:var(--brand);flex:0 0 auto}

/* ---------- STAT ITEM ---------- */
.fdm-stat{display:flex;align-items:center;gap:var(--space-4)}
.fdm-stat__num{font-family:var(--font-sans);font-weight:var(--fw-extrabold);font-size:2.2rem;line-height:1;letter-spacing:-.01em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.fdm-stat__num b{color:var(--brand)}
.fdm-stat__label{font-size:var(--fs-xs);color:var(--text-muted);text-transform:uppercase;letter-spacing:var(--ls-wide);margin-top:.25rem}

/* ---------- COLLABORATOR CARD ---------- */
.fdm-collab{
  position:relative;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border-strong);background:var(--black-800);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.fdm-collab:hover{transform:translateY(-3px);border-color:var(--red-500);box-shadow:var(--glow-red-md)}
.fdm-collab__media{aspect-ratio:3/4;position:relative;background:linear-gradient(180deg,#1b1617,#0a0708)}
.fdm-collab__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(1.05)}
.fdm-collab__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,4,5,.92))}
.fdm-collab__meta{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);z-index:1}
.fdm-collab__name{font-family:var(--font-sans);font-weight:var(--fw-bold);color:var(--text-strong);font-size:var(--fs-base)}
.fdm-collab__role{font-size:var(--fs-xs);color:var(--brand);text-transform:uppercase;letter-spacing:var(--ls-wide);margin-top:.15rem}

/* ---------- VIDEO CARD ---------- */
.fdm-video{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;
  border:1px solid var(--border-strong);background:var(--black-800);aspect-ratio:16/10;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.fdm-video:hover{border-color:var(--red-500);box-shadow:var(--glow-red-md);transform:translateY(-3px)}
.fdm-video img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}
.fdm-video__play{position:absolute;inset:0;display:grid;place-items:center}
.fdm-video__play span{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--red-500);color:#fff;box-shadow:var(--glow-red-lg);transition:transform var(--dur-base) var(--ease-snap)}
.fdm-video:hover .fdm-video__play span{transform:scale(1.08)}
.fdm-video__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--space-4);background:linear-gradient(transparent,rgba(6,4,5,.9));z-index:1}
.fdm-video__cap h4{color:#fff;font-size:var(--fs-base)}
.fdm-video__cap p{color:var(--grey-300);font-size:var(--fs-xs);margin-top:.15rem}

/* ---------- FORM FIELD ---------- */
.fdm-field{display:flex;flex-direction:column;gap:.4rem}
.fdm-field__label{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-muted)}
.fdm-field__control{
  display:flex;align-items:center;gap:.7rem;
  background:var(--black-800);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  padding:0 .9rem;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.fdm-field__control:focus-within{border-color:var(--red-500);box-shadow:var(--glow-red-sm)}
.fdm-field__control svg{width:1.05rem;height:1.05rem;color:var(--brand);flex:0 0 auto}
.fdm-field input,.fdm-field select{
  flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--text-strong);
  font-family:var(--font-sans);font-size:var(--fs-sm);padding:.85rem 0;
}
.fdm-field select{cursor:pointer;appearance:none;color:var(--text-body)}
.fdm-field input::placeholder{color:var(--text-faint)}
.fdm-field__chev{color:var(--text-muted);pointer-events:none}

/* ---------- SECTION HEADING ---------- */
.fdm-section-head{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.fdm-section-head__title{font-family:var(--font-display);text-transform:uppercase;font-size:var(--fs-display-m);letter-spacing:var(--ls-display);color:var(--text-strong);line-height:.95}
.fdm-section-head__sub{font-family:var(--font-sans);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--brand);font-size:var(--fs-sm)}

/* ---------- NAVBAR ---------- */
.fdm-navbar{
  display:flex;align-items:center;gap:var(--space-8);
  padding:.9rem var(--container-pad);
  background:rgba(10,7,8,.55);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-hairline);
}
.fdm-navbar__brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.fdm-navbar__brand img{width:38px}
.fdm-navbar__brand .wm{font-family:var(--font-display);text-transform:uppercase;font-size:1.35rem;color:#fff;line-height:.8;letter-spacing:.01em}
.fdm-navbar__brand .tl{font-size:8px;letter-spacing:.32em;color:var(--brand);text-transform:uppercase}
.fdm-navbar__links{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.fdm-navbar__links a{font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text-body);position:relative;padding:.3rem 0}
.fdm-navbar__links a:hover{color:#fff}
.fdm-navbar__links a[aria-current="page"]{color:#fff}
.fdm-navbar__links a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--red-500);box-shadow:var(--glow-red-sm)}

/* ---------- SOCIAL RAIL ---------- */
.fdm-social{display:flex;flex-direction:column;gap:.7rem}
.fdm-social a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:var(--black-750);border:1px solid var(--border-strong);color:var(--grey-200);
  transition:all var(--dur-base) var(--ease-out);
}
.fdm-social a:hover{background:var(--red-500);color:#fff;border-color:var(--red-400);box-shadow:var(--glow-red-md);transform:translateY(-2px)}
.fdm-social a svg{width:20px;height:20px}

/* ---------- FOOTER ---------- */
.fdm-footer{background:var(--black-900);border-top:1px solid var(--border-hairline);color:var(--text-muted)}
.fdm-footer__strip{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center;padding:var(--space-6) var(--container-pad);border-bottom:1px solid var(--border-hairline)}
.fdm-footer__strip .item{display:flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);color:var(--text-body)}
.fdm-footer__strip .item svg{color:var(--brand);width:1.1rem;height:1.1rem}
.fdm-footer__base{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;align-items:center;padding:var(--space-5) var(--container-pad);font-size:var(--fs-xs);color:var(--text-faint)}

/* ---------- ALERT ---------- */
.fdm-alert{display:flex;gap:.8rem;align-items:flex-start;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid;font-size:var(--fs-sm)}
.fdm-alert svg{width:1.2rem;height:1.2rem;flex:0 0 auto;margin-top:.05rem}
.fdm-alert__title{font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:.15rem}
.fdm-alert--info{background:var(--info-bg);border-color:#1b4a6b;color:var(--grey-200)}
.fdm-alert--info svg{color:var(--info-500)}
.fdm-alert--success{background:var(--success-bg);border-color:#1c6b3f;color:var(--grey-200)}
.fdm-alert--success svg{color:var(--success-500)}
.fdm-alert--warning{background:var(--warning-bg);border-color:var(--amber-600);color:var(--grey-200)}
.fdm-alert--warning svg{color:var(--amber-500)}
.fdm-alert--error{background:var(--error-bg);border-color:var(--red-700);color:var(--grey-200)}
.fdm-alert--error svg{color:var(--red-400)}