/*!
 * Copyright (c) 2025 Kenneth Raymond
 * All rights reserved.
 *
 * Part of the expertsincmt WordPress theme.
 * 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;
  }
}