/* ════════════════════════════════════════════════════════════════
   Aura — askmira.es/aura
   Shares the Mira design system (../style.css); this file only swaps
   the accent to Aura's sky blue and adds Aura-specific components.
   Must be linked AFTER ../style.css.
   ════════════════════════════════════════════════════════════════ */

/* ── Bilingual: show only the active language ─────────────────── */
[data-lang="en"] .lang-es { display: none !important; }
[data-lang="es"] .lang-en { display: none !important; }

/* ── Aura brand sky blue (from the app icon's gradient) ───────── */
:root {
  --accent:     #4FA3F0;
  --accent-hov: #74B8F4;

  --a12: rgba(79,163,240,.12);
  --a15: rgba(79,163,240,.15);
  --a18: rgba(79,163,240,.18);
  --a20: rgba(79,163,240,.20);
  --a25: rgba(79,163,240,.25);
  --a30: rgba(79,163,240,.30);

  /* warm sun glow, echoing the icon's top-left corner */
  --sun: #F0B24F;
}

[data-theme="light"] {
  --accent:     #1466C4;
  --accent-hov: #0F52A0;

  --a12: rgba(20,102,196,.10);
  --a15: rgba(20,102,196,.12);
  --a18: rgba(20,102,196,.14);
  --a20: rgba(20,102,196,.17);
  --a25: rgba(20,102,196,.22);
  --a30: rgba(20,102,196,.24);

  --sun: #B87A14;
}

/* ── Weather chip used in the hero (the AEMET-data motif) ─────── */
.wx-chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--a18);
  border: 1px solid var(--a30);
  border-radius: 6px;
  padding: 0.15em 0.5em;
  white-space: nowrap;
}
.wx-chip.sun {
  color: var(--sun);
  background: color-mix(in srgb, var(--sun) 15%, transparent);
  border-color: color-mix(in srgb, var(--sun) 32%, transparent);
}

/* Aura's hero has no demo panel; tighten the bottom rhythm a bit. */
.hero-sub {
  font-size: 0.74rem;
  color: var(--dim);
  margin: 1.4rem 0 0;
}

/* ════ Real screenshot gallery ════════════════════════════════════ */

/* ── Hero teaser: three phone shots (the living sky across the day) ── */
.hero-shots {
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* overflow-x makes overflow-y clip too, so pad enough for the drop
     shadow (~36px below, ~8px above/sides) to fade instead of being cut. */
  padding: 10px 8px 40px;
  scrollbar-width: none;
}
.hero-shots::-webkit-scrollbar { display: none; }
.hero-shots figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
}
.hero-shots .shot-phone img { width: clamp(178px, 42vw, 236px); height: auto; }

.shots-hint {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  margin: -0.35rem 0 0;
}

/* ── Section sub-heading ─────────────────────────────────────── */
.sec-sub {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.6rem 0 0;
}

/* ── Device groups ───────────────────────────────────────────── */
.gallery-group { margin-top: 3rem; }
.group-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
}
.group-note {
  text-transform: none;
  letter-spacing: 0;
  color: var(--dim);
  font-size: 0.72rem;
}

/* ── Horizontal scroll-snap rails (CSS-only — works with any pointer,
      including the Magic Mouse, where JS wheel handlers fail) ─────── */
.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 1.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--a30) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-thumb { background: var(--a30); border-radius: 4px; }
.rail::-webkit-scrollbar-track { background: transparent; }
.rail figure {
  margin: 0;
  flex: 0 0 auto;
  scroll-snap-align: center;
}

.rail figcaption,
.widget-grid figcaption {
  margin-top: 0.6rem;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--dim);
}

/* ── Shared frame look ───────────────────────────────────────── */
.shot-phone img,
.shot-pad img,
.shot-watch img,
.shot-widget img {
  display: block;
  background: var(--a12);
  box-shadow: 0 14px 36px -14px rgba(0, 0, 0, .5);
}

/* iPhone */
.shot-phone img {
  width: 230px;
  aspect-ratio: 1320 / 2868;
  border-radius: 30px;
  border: 1px solid var(--a15);
}

/* Android — sized to a real Google Pixel 10a screen (1080 × 2424, 20:9). */
.rail-android .shot-phone img { aspect-ratio: 1080 / 2424; }

/* iPad */
.shot-pad img {
  width: min(80vw, 470px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  border: 1px solid var(--a15);
}

/* Apple Watch — dark, tall rounded rectangle */
.shot-watch img {
  width: 148px;
  aspect-ratio: 410 / 502;
  border-radius: 34px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .08);
}

/* ── Widgets — real Home Screen renders, height-normalised in a rail
      so each size keeps its true proportions side by side ────────── */
.rail-widget { align-items: flex-end; }
.rail-widget .shot-widget { margin: 0; }
.rail-widget .shot-widget img {
  height: 224px;
  width: auto;
  max-width: none;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .06);
}
@media (max-width: 640px) {
  .rail-widget .shot-widget img { height: 156px; border-radius: 15px; }
}

/* ── App icon follows the theme ───────────────────────────────────
   Aura ships two distinct app icons. The markup points at the light
   icon (assets/icon.png); under the dark theme, swap in the dark one.
   data-theme is set before first paint (anti-flash), so no flicker. */
[data-theme="dark"] img[src$="assets/icon.png"] {
  content: url("assets/icon-dark.png");
}