/**
 * Copyright (c) 2025-2026 Kenneth Raymond
 * All rights reserved.
 *
 * Part of the Experts in CMT platform.
 * Do not copy, modify, or redistribute without permission.
 */

/* ========================================================================
   GENES LOOP
   ------------------------------------------------------------------------
   Presentation layer for the CMT Genes & Subtypes query loop.
   ======================================================================== */

:root {
  --gl-card-radius: 22px;
  --gl-card-padding: 1.75rem;
  --gl-card-min-height: 215px;

  --gl-card-bg: var(--bg);
  --gl-card-border: var(--border);

  --gl-card-shadow: 0 8px 24px rgb(14 42 84/5%);
  --gl-card-hover-shadow: 0 14px 34px rgb(14 42 84/5%);

  --gl-speed: 800ms;
  --gl-ease: cubic-bezier(0.02, 0.9, 0.15, 1);
}

/* ==========================================================================
   Cards
   ========================================================================== */

.eic-subtype-card {
  min-height: var(--gl-card-min-height);
  background: var(--gl-card-bg);
  border: 1px solid var(--gl-card-border);
  border-radius: var(--gl-card-radius);
  box-shadow: var(--gl-card-shadow);
  overflow: hidden;
  transition:
    box-shadow var(--gl-speed) var(--gl-ease),
    border-color var(--gl-speed) var(--gl-ease);
}

.eic-subtype-card:hover,
.eic-subtype-card:focus-within {
  box-shadow: var(--gl-card-hover-shadow);
  border-color: var(--primary-light);
}

.eic-subtype-card__link,
.eic-subtype-card__link:hover,
.eic-subtype-card__link:focus {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  min-height: var(--gl-card-min-height);
  padding: var(--gl-card-padding);

  color: inherit;
  text-decoration: none !important;

  transform: none !important;
  transition: none !important;
}

.eic-subtype-card__body {
  display: block;
}

.eic-subtype-card h2.eic-subtype-card__title {
  margin: 0 !important;
  padding: 0;
  font-size: clamp(1.55rem, 1.2rem + 0.8vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--primary);
  text-decoration: none;
}

.eic-subtype-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--accent);
}

.eic-subtype-card__meta span {
  display: inline-flex;
  align-items: center;
}

.eic-subtype-card__meta span + span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 0.9em;
  margin-right: 0.35rem;
  background: rgb(85 85 85/50%);
}

.eic-subtype-card__gene {
    color: var(--primary-light);
    font-style: italic;
    font-weight: 500;
}

.eic-subtype-card__summary {
    margin-top: 1.15rem;
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}

.eic-subtype-card__summary em {
  color: var(--primary-light);
  font-style: italic;
  font-weight: 400;
}

.eic-subtype-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.5rem;
  padding-right: 0.15rem;
}

.eic-subtype-card__updated {
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--muted);
}

.eic-subtype-card__arrow {
  flex: 0 0 auto;
  color: var(--primary-light);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  margin-left: 0.75rem;
  transition: transform var(--gl-speed) var(--gl-ease);
}

.eic-subtype-card:hover .eic-subtype-card__arrow,
.eic-subtype-card:focus-within .eic-subtype-card__arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   Card head: type dot + subtype title
   ========================================================================== */

.eic-subtype-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0;
}

.eic-subtype-card__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.eic-subtype-card__tag {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 9%, #fff);
  color: var(--primary);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.eic-subtype-card__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary-light); /* default: Unclassified / no type set */
}

/* Type dot ramp — derived from --primary (#174777) → --primary-light (#5ea0c9),
   mapped to the canonical type_classification order. Dot only; title stays --primary. */
.eic-subtype-card[data-cmt-type="CMT1"] .eic-subtype-card__dot { background: #174777; }
.eic-subtype-card[data-cmt-type="CMT2"] .eic-subtype-card__dot { background: #1c4e7d; }
.eic-subtype-card[data-cmt-type="CMT4"] .eic-subtype-card__dot { background: #225584; }
.eic-subtype-card[data-cmt-type="CMTX"] .eic-subtype-card__dot { background: #275c8a; }
.eic-subtype-card[data-cmt-type="CMTDI"] .eic-subtype-card__dot { background: #2d6290; }
.eic-subtype-card[data-cmt-type="CMTRI"] .eic-subtype-card__dot { background: #326997; }
.eic-subtype-card[data-cmt-type="dHMN"] .eic-subtype-card__dot { background: #38709d; }
.eic-subtype-card[data-cmt-type="dSMA"] .eic-subtype-card__dot { background: #3d77a3; }
.eic-subtype-card[data-cmt-type="GAN"] .eic-subtype-card__dot { background: #437ea9; }
.eic-subtype-card[data-cmt-type="HMSN"] .eic-subtype-card__dot { background: #4885b0; }
.eic-subtype-card[data-cmt-type="HSAN"] .eic-subtype-card__dot { background: #4e8bb6; }
.eic-subtype-card[data-cmt-type="HSN"] .eic-subtype-card__dot { background: #5392bc; }
.eic-subtype-card[data-cmt-type="smalep"] .eic-subtype-card__dot { background: #5999c3; }
.eic-subtype-card[data-cmt-type="Unclassified"] .eic-subtype-card__dot { background: #5ea0c9; }

/* Alias (aka), tucked under the title text and de-emphasized */
.eic-subtype-card__alias {
  margin: 0.3rem 0 0;
  padding-left: 18px; /* dot width + gap, aligns under the title text */
  font-size: 0.8rem;
  line-height: 1.3;
  font-style: italic;
  color: var(--muted);
}

/* ==========================================================================
   Card attribute strip: Gene / Discovered / Inheritance
   ========================================================================== */

.eic-subtype-card__attrs {
  display: flex;
  margin-top: 1.2rem;
  border-top: 1px solid var(--border);
}

.eic-subtype-card__attr {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.7rem 0.55rem;
  border-right: 1px solid var(--border);
}

.eic-subtype-card__attr:first-child {
  padding-left: 0.15rem;
}

.eic-subtype-card__attr:last-child {
  flex-grow: 1.2;
  border-right: 0;
  padding-right: 0.15rem;
}

.eic-subtype-card__attr-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9aa2ac;
}

.eic-subtype-card__attr-value {
  display: block;
  margin-top: 3px;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text);
}

.eic-subtype-card__attr-value.eic-subtype-card__gene {
  color: var(--primary-light);
  font-style: italic;
  font-weight: 500;
}

/* Inheritance is the last attribute in the strip. Its stored value is
   mixed-case across records ("autosomal dominant" vs "Autosomal
   Dominant"), so normalize display to Title Case, matching the
   documented inheritance-title-case intent. Gene (italic symbol) and
   Discovered (year) are left untouched so symbols like PMP22 keep their
   exact casing. */
.eic-subtype-card__attr:last-child .eic-subtype-card__attr-value {
  text-transform: capitalize;
}

/* ==========================================================================
   Keyboard Focus
   ========================================================================== */

.eic-subtype-card__link:focus-visible {
  outline: 2px solid var(--primary-light);
  outline-offset: 4px;
  border-radius: calc(var(--gl-card-radius) - 4px);
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 600px) {
  :root {
    --gl-card-padding: 1.4rem;
    --gl-card-min-height: 210px;
  }

  .eic-subtype-card__title {
    font-size: 1.55rem;
  }

  .eic-subtype-card__meta {
    font-size: 0.82rem;
  }

  /* Stack the attribute strip into full-width label/value rows so the
     single-word labels (DISCOVERED, INHERITANCE) and long values
     (Autosomal Dominant) can never overflow or clip. The 3-column row
     only fits comfortably on tablet and up. */
  .eic-subtype-card__attrs {
    display: block;
    border-top: 1px solid var(--border);
  }

  .eic-subtype-card__attr {
    flex: none;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.15rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .eic-subtype-card__attr:first-child {
    padding-top: 0.7rem;
  }

  .eic-subtype-card__attr:last-child {
    flex-grow: 0;
    border-bottom: 0;
  }

  .eic-subtype-card__attr-value {
    margin-top: 0;
    text-align: right;
  }

  /* Keep the single-word labels (DISCOVERED, INHERITANCE) on one line. In
     the stacked mobile row the label is a flex item, so the uppercase
     tracking on INHERITANCE could push its final letter onto its own line
     (the "rogue E"). Holding the label's width and forbidding the wrap
     lets the value column absorb the space instead. */
  .eic-subtype-card__attr-label {
    white-space: nowrap;
    flex-shrink: 0;
    /* The blanket mobile `body * { font-size:18px !important }` floor blows
       this caption up to body size; nowrap + no-shrink then let it eat the
       row and starve the value column until "Autosomal Dominant" breaks
       mid-word. Restore the caption size so the value keeps its column. */
    font-size: 11px !important;
  }

  /* Same floor balloons the type chip to body size, wrapping it below the
     title; keep it the small chip it was designed to be. */
  .eic-subtype-card__tag {
    font-size: 0.72rem !important;
  }

  /* Wrap values at spaces only, never inside a word. */
  .eic-subtype-card__attr-value {
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* === Mobile: opt out of the main.css 18px floor (see its
   wp-block-heading precedent) — card titles keep hierarchy === */
@media (max-width: 600px) {
  .eic-subtype-card__title {
    font-size: 1.4rem !important;
    line-height: 1.25 !important;
  }
}