/* ==========================================================================
   Cessaland — Components
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* ---- Floating nav -------------------------------------------------------- */

.nav {
  position: sticky;
  top: var(--space-4);
  z-index: 40;
  margin-top: var(--space-4);
}

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-pill);
  background: rgba(21, 26, 41, 0.62);
  border: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-resting);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

.wordmark__mark {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--accent);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__link {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-lamp);
}

.nav__link:hover {
  color: var(--text-primary);
}

.nav__link--home {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.nav__link--home svg {
  width: 16px;
  height: 16px;
}

.nav__link--home:hover {
  color: var(--accent-soft);
}

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.7em 1.3em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-lamp),
              box-shadow var(--dur-fast) var(--ease-lamp),
              background var(--dur-fast) var(--ease-lamp),
              border-color var(--dur-fast) var(--ease-lamp);
}

.btn:active {
  transform: translateY(1px);
}

.btn--accent {
  background: linear-gradient(180deg, var(--amber-300), var(--amber-500));
  color: var(--text-on-accent);
  box-shadow: var(--shadow-glow-amber);
}

.btn--accent:hover {
  box-shadow: 0 0 1px rgba(232, 163, 61, 0.7), 0 12px 36px -6px rgba(232, 163, 61, 0.5);
  transform: translateY(-1px);
}

.btn--ghost {
  background: var(--surface-glass);
  border-color: var(--border);
  color: var(--text-primary);
}

.btn--ghost:hover {
  border-color: var(--border-strong);
  background: var(--surface-glass-strong);
}

.btn--sm {
  padding: 0.5em 1em;
  font-size: var(--fs-micro);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* ---- Badge ------------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.3em 0.85em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  background: var(--surface-glass);
}

.badge--accent {
  color: var(--amber-100);
  border-color: var(--border-amber);
  background: rgba(232, 163, 61, 0.1);
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---- Card anatomy -----------------------------------------------------------
   background layer (page scene) -> ambient glow -> shadow -> card surface ->
   highlight/border -> content. Each layer below is a literal implementation
   of that stack, not just a single box-shadow. */

.card-link {
  display: block;
  height: 100%;
}

.card {
  position: relative;
  height: 100%;
  border-radius: var(--radius-xl);
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  /* The transform's function list (translateY → perspective → rotateX →
     rotateY) never changes shape, only its values do — even at rest,
     with 0deg rotation. Browsers can glitch the border-radius clip on a
     child when a transform jumps between "flat" and "3D with perspective"
     shapes; keeping the shape constant avoids that entirely. */
  transform: translateY(var(--lift)) perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform var(--dur-medium) var(--ease-lamp);
  will-change: transform;
  backface-visibility: hidden;
}

.card:hover {
  --lift: -7px;
}

.card__glow {
  position: absolute;
  inset: -18% -18% -30%;
  border-radius: var(--radius-xl);
  background: radial-gradient(closest-side, rgba(232, 163, 61, 0.32), transparent 72%);
  opacity: 0;
  filter: blur(28px);
  transition: opacity var(--dur-slow) var(--ease-lamp);
  z-index: 0;
  /* This glow deliberately bleeds outside the card's own box (that's the
     "ambient light" effect) — including into the row below in the grid.
     Without this, that bleed area would intercept hover/click and the
     card below would steal hover right at the boundary. Decorative only. */
  pointer-events: none;
}

.card--teal .card__glow {
  background: radial-gradient(closest-side, rgba(79, 209, 197, 0.28), transparent 72%);
}

.card__surface {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 62%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated), var(--shadow-inset-top);
  transition: box-shadow var(--dur-medium) var(--ease-lamp),
              border-color var(--dur-medium) var(--ease-lamp);
  /* Belt-and-suspenders against the same clip glitch: pin this element to
     its own stable compositing layer and tell the browser nothing ever
     paints outside its box, so the rounded clip doesn't get recomputed
     (and briefly dropped) while the parent's transform animates. */
  transform: translateZ(0);
  contain: paint;
}

.card__surface::before {
  /* the lit top edge — light catching the raised panel */
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 217, 163, 0.55), transparent);
  opacity: 0.7;
}

.card:hover .card__glow {
  opacity: 1;
}

.card:hover .card__surface {
  box-shadow: var(--shadow-elevated-hover), var(--shadow-inset-top);
  border-color: var(--border-strong);
}

.card__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-elevated-2);
  /* Pre-promote this clipping box to its own stable compositor layer so
     the img's transform below never triggers a fresh layer promotion at
     the hover boundary (see note on .card__visual img). */
  transform: translateZ(0);
  will-change: transform;
}

.card__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Same "constant shape" rule as .card above: translateZ(0) is always
     present, only the scale value changes on hover. Also pre-promoted via
     will-change so the transition never crosses a layer-promotion/demotion
     boundary — that promotion moment is exactly where the ancestor's
     rounded overflow-clip could drop for a frame and flash square corners. */
  transform: translateZ(0) scale(1);
  transition: transform var(--dur-slow) var(--ease-lamp);
  will-change: transform;
}

.card:hover .card__visual img {
  transform: translateZ(0) scale(1.045);
}

.card__visual::after {
  /* integrates the image into the panel instead of feeling like a dropped-in <img> */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 14, 24, 0) 55%, rgba(11, 14, 24, 0.55) 100%);
}

.card__icon {
  position: absolute;
  top: var(--space-4);
  inset-inline-start: var(--space-4);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: rgba(11, 14, 24, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  color: var(--amber-300);
}

.card--teal .card__icon {
  color: var(--teal-300);
}

.card__icon svg {
  width: 20px;
  height: 20px;
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
}

.card--featured .card__title {
  font-size: var(--fs-h1);
}

.card__desc {
  color: var(--text-secondary);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.card__footer {
  margin-top: auto;
  padding-top: var(--space-4);
  display: flex;
  align-items: center;
  /* Only the action link lives here now (no badge). `flex-end` keeps it on
     the far side (left, in RTL) where it sat before. If a second element
     (e.g. a badge) is ever added back to this footer, switch this back to
     `space-between` to spread the two apart again. */
  justify-content: flex-end;
}

.card__action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--amber-300);
}

.card--teal .card__action {
  color: var(--teal-300);
}

.card__action svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-lamp);
}

/* The chevron (M15 6 9 12l6 6) already points toward the start edge, which
   is "forward" in RTL reading direction — so on hover it nudges further
   toward the start, matching the reading flow. */
.card:hover .card__action svg {
  transform: translateX(-4px);
}

/* ---- Disabled / "coming soon" card ------------------------------------------ */

.card--disabled {
  cursor: not-allowed;
}

.card--disabled .card__surface {
  background: linear-gradient(165deg, var(--bg-elevated-2), var(--surface) 70%);
  border-style: dashed;
  border-color: var(--border);
  box-shadow: var(--shadow-resting);
}

.card--disabled:hover {
  transform: none;
}

.card--disabled:hover .card__surface {
  box-shadow: var(--shadow-resting);
  border-color: var(--border);
}

.card--disabled .card__glow {
  display: none;
}

.card--disabled .card__visual {
  opacity: 0.55;
}

.card--disabled .card__title,
.card--disabled .card__desc {
  color: var(--text-tertiary);
}

.card--disabled .card__action {
  color: var(--text-tertiary);
}

/* ---- Form controls (shared by GPA calculator) -------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  font-weight: 600;
}

.input {
  width: 100%;
  padding: 0.75em 1em;
  border-radius: var(--radius-md);
  background: var(--bg-elevated-1);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease-lamp),
              box-shadow var(--dur-fast) var(--ease-lamp);
}

.input:focus-visible {
  border-color: var(--border-amber);
  box-shadow: 0 0 0 3px rgba(232, 163, 61, 0.14);
}

.input--invalid {
  border-color: rgba(224, 108, 90, 0.6);
  box-shadow: 0 0 0 3px rgba(224, 108, 90, 0.12);
}

.input::placeholder {
  color: var(--text-tertiary);
}

.input[type="number"] {
  font-variant-numeric: tabular-nums;
}

/* Remove native number input spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  background: var(--surface-glass);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  flex: none;
  transition: color var(--dur-fast) var(--ease-lamp),
              border-color var(--dur-fast) var(--ease-lamp),
              background var(--dur-fast) var(--ease-lamp);
}

.icon-btn:hover {
  color: #e06c5a;
  border-color: rgba(224, 108, 90, 0.4);
  background: rgba(224, 108, 90, 0.08);
}

.icon-btn svg {
  width: 16px;
  height: 16px;
}

/* ---- Panel (glass surface used for calculator sections) ---------------------- */

.panel {
  position: relative;
  border-radius: var(--radius-xl);
  background: linear-gradient(165deg, var(--surface-2), var(--surface) 65%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-elevated);
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(90deg, transparent, rgba(246, 217, 163, 0.4), transparent);
}

.panel__body {
  padding: var(--space-6);
}

@media (max-width: 640px) {
  .panel__body {
    padding: var(--space-5);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Mobile Optimization for Nav
   ========================================================================== */
@media (max-width: 480px) {
  .container {
    padding-inline: var(--space-4);
  }

  .nav {
    top: var(--space-2);
    margin-top: var(--space-2);
  }

  .nav__bar {
    padding: var(--space-2) var(--space-3); 
    gap: var(--space-2);
  }

  .wordmark {
    font-size: 0.95rem;
    gap: 6px;
  }
  .wordmark__mark {
    width: 18px;
    height: 18px;
  }

  .nav__links {
    gap: var(--space-3);
  }
  .nav__link {
    font-size: var(--fs-micro);
  }
}