/* ============================================================
   AURORA TEMPLATE — Editorial elegance for weather data
   ============================================================
   Typography: Fraunces (display) + Inter (body)
   Mood: Serious, editorial, spacious — "NYT Weather" vibes
*/

.tpl-aurora{
    font-family:var(--font-body);
    color:var(--color-text);
    background:var(--color-bg);
    position:relative;
    min-height:100vh;
}

.tpl-aurora h1,.tpl-aurora h2,.tpl-aurora h3{
    font-family:var(--font-heading);
    font-weight:600;
    letter-spacing:-.015em;
    line-height:1.15;
}

/* Ambient background — subtle aurora gradient, fixed, barely there */
.aurora-ambient{
    position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
        radial-gradient(ellipse 80% 50% at 80% 0%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 60%),
        radial-gradient(ellipse 70% 40% at 10% 100%, color-mix(in srgb, var(--color-accent) 6%, transparent), transparent 55%);
}

/* ---- Header ---- */
.aurora-header{
    border-bottom:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    background:color-mix(in srgb, var(--color-bg) 85%, transparent);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    position:sticky;top:0;z-index:20;
}
.aurora-header-row{
    display:grid;grid-template-columns:auto 1fr auto;gap:2rem;
    align-items:center;padding:1.25rem 1rem;
}
.aurora-brand{
    display:flex;align-items:center;gap:.625rem;
    color:var(--color-text);text-decoration:none;
}
.aurora-brand-mark{color:var(--color-primary);display:inline-flex}
.aurora-brand-text{
    font-family:var(--font-heading);font-weight:600;font-size:1.25rem;
    letter-spacing:-.01em;
}

.aurora-nav{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.aurora-nav a{
    color:var(--color-text);text-decoration:none;
    padding:.375rem .875rem;border-radius:9999px;
    font-size:.9rem;font-weight:500;
    transition:background .15s ease;
}
.aurora-nav a:hover{background:color-mix(in srgb, var(--color-text) 6%, transparent)}

.aurora-lang{
    display:flex;gap:.375rem;align-items:center;
    font-family:var(--font-body);font-size:.8rem;
    color:var(--color-muted);letter-spacing:.05em;text-transform:uppercase;
}
.aurora-lang a{color:var(--color-muted);font-weight:600;text-decoration:none}
.aurora-lang a.active{color:var(--color-primary)}

/* ---- Main ---- */
.aurora-main{padding:3rem 1rem 4rem;max-width:1180px}

/* ---- Hero ---- */
.aurora-hero{
    text-align:center;
    padding:4rem 1rem 3rem;
    position:relative;
}
.aurora-hero-kicker{
    font-family:var(--font-body);
    font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
    color:var(--color-primary);margin-bottom:1rem;
}
.aurora-hero h1{
    font-size:clamp(2.5rem, 5vw + 1rem, 4.5rem);
    margin:0 0 1rem;
    font-weight:600;
}
.aurora-hero .tagline{
    font-family:var(--font-heading);font-style:italic;
    font-size:clamp(1.125rem, 1vw + 1rem, 1.5rem);
    color:var(--color-muted);max-width:42rem;margin:0 auto;
    font-weight:400;
}

/* Hero "reading" display — the signature huge temperature */
.aurora-reading{
    display:grid;grid-template-columns:auto auto;gap:.5rem 2rem;
    justify-content:center;align-items:baseline;
    margin:3rem auto 2rem;padding:2rem;
    max-width:720px;
    border-top:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-bottom:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.aurora-reading-primary{grid-row:1/3;display:flex;align-items:baseline;gap:.25rem}
.aurora-reading-primary .val{
    font-family:var(--font-heading);
    font-size:clamp(4rem, 8vw + 1rem, 7rem);
    font-weight:500;line-height:.9;
    color:var(--color-text);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.04em;
}
.aurora-reading-primary .unit{font-size:1.5rem;color:var(--color-muted);font-weight:400}
.aurora-reading-secondary{font-family:var(--font-body);font-size:.8rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.1em}
.aurora-reading-value{font-family:var(--font-heading);font-size:1.5rem;color:var(--color-text);font-variant-numeric:tabular-nums}

/* ---- Weather cards ---- */
.aurora-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px;background:color-mix(in srgb, var(--color-text) 10%, transparent);
    border:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
    border-radius:var(--radius);overflow:hidden;margin:2rem 0;
}
.aurora-card{
    background:color-mix(in srgb, var(--color-bg) 96%, white);
    padding:1.75rem;
    transition:background .2s ease;
    position:relative;
}
.aurora-card:hover{background:color-mix(in srgb, var(--color-bg) 92%, white)}
.aurora-card h3{
    font-family:var(--font-body);
    font-size:.7rem;font-weight:600;text-transform:uppercase;
    letter-spacing:.15em;color:var(--color-muted);
    margin:0 0 .75rem;
}
.aurora-card .val{
    font-family:var(--font-heading);
    font-size:2.5rem;font-weight:500;line-height:1;
    color:var(--color-text);font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}
.aurora-card .unit{font-size:1rem;color:var(--color-muted);font-weight:400;margin-left:.25rem}
.aurora-card .sub{margin-top:.75rem;font-size:.8rem;color:var(--color-muted);font-variant-numeric:tabular-nums}
.aurora-card .sub strong{color:var(--color-text);font-weight:600}

/* ---- Section heading ---- */
.aurora-section-heading{
    display:flex;align-items:baseline;gap:1rem;
    margin:3rem 0 1rem;
}
.aurora-section-heading::after{
    content:"";flex:1;height:1px;
    background:color-mix(in srgb, var(--color-text) 15%, transparent);
}
.aurora-section-heading h2{
    font-size:1.75rem;margin:0;font-weight:600;
}
.aurora-kicker{
    font-family:var(--font-body);font-size:.7rem;font-weight:600;
    letter-spacing:.15em;text-transform:uppercase;color:var(--color-primary);
}

/* ---- Data table ---- */
.aurora-table{
    width:100%;border-collapse:collapse;
    font-variant-numeric:tabular-nums;margin:1rem 0;
}
.aurora-table th,.aurora-table td{
    padding:.75rem 1rem;text-align:left;
    border-bottom:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.aurora-table th{
    font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;
    letter-spacing:.15em;color:var(--color-muted);font-weight:600;
}
.aurora-table td{font-size:.95rem}

/* ---- CMS page ---- */
.aurora-cms-page{
    max-width:720px;margin:2rem auto;padding:2rem 0;
}
.aurora-cms-page h1{font-size:clamp(2rem, 3vw + 1rem, 3rem);margin-bottom:1rem}
.aurora-cms-page .aurora-cms-body{
    font-size:1.0625rem;line-height:1.7;color:color-mix(in srgb, var(--color-text) 90%, transparent);
}
.aurora-cms-page .aurora-cms-body img{max-width:100%;height:auto;border-radius:var(--radius);margin:1.5rem 0}
.aurora-cms-page .aurora-cms-body p{margin:0 0 1rem}
.aurora-cms-page .aurora-cms-body h2{margin:2rem 0 1rem;font-size:1.75rem}
.aurora-cms-page .aurora-cms-body h3{margin:1.5rem 0 .75rem;font-size:1.25rem}
.aurora-cms-page .aurora-cms-body blockquote{
    border-left:3px solid var(--color-primary);
    margin:1.5rem 0;padding:.5rem 1.25rem;
    font-family:var(--font-heading);font-style:italic;font-size:1.25rem;
    color:color-mix(in srgb, var(--color-text) 75%, transparent);
}

/* ---- Empty state ---- */
.aurora-empty{
    text-align:center;padding:4rem 2rem;
    border:1px dashed color-mix(in srgb, var(--color-text) 15%, transparent);
    border-radius:var(--radius);margin:2rem 0;
    color:var(--color-muted);
}
.aurora-empty-icon{font-size:2.5rem;margin-bottom:1rem;opacity:.5}
.aurora-empty h3{font-family:var(--font-heading);margin:.5rem 0;color:var(--color-text)}

/* ---- Gauges ---- */
.aurora-gauges{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1.5rem;margin:2rem 0;
}
.aurora-gauge{
    background:color-mix(in srgb, var(--color-bg) 96%, white);
    border:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
    border-radius:var(--radius);padding:1.5rem 1rem 1rem;text-align:center;
}
.aurora-gauge svg{width:100%;height:auto;max-width:220px;display:block;margin:0 auto}

/* ---- Last update line ---- */
.aurora-updated{
    text-align:center;font-size:.8rem;color:var(--color-muted);
    letter-spacing:.05em;margin:1.5rem 0 0;
    font-variant-numeric:tabular-nums;
}
.aurora-updated .dot{
    display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
    background:var(--color-primary);margin-right:.5rem;
    animation:aurora-pulse 2s ease-in-out infinite;
}
@keyframes aurora-pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.5;transform:scale(.8)}
}

/* ---- Footer ---- */
.aurora-footer{
    margin-top:6rem;padding:2.5rem 0;
    border-top:1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.aurora-footer-row{
    display:flex;justify-content:space-between;gap:1rem;
    flex-wrap:wrap;align-items:center;
}
.aurora-footer-brand{font-family:var(--font-heading);font-weight:600}
.aurora-footer-meta{font-size:.8rem;font-family:var(--font-body)}

/* ---- Blocks ---- */
.aurora-block{margin:1rem 0}
.aurora-block:empty{display:none}

/* ---- JSON dump (for trends raw) ---- */
.aurora-json{
    background:#0f172a;color:#e2e8f0;
    padding:1.25rem;border-radius:var(--radius);
    font-family:ui-monospace,'SF Mono',monospace;
    font-size:.8rem;overflow:auto;max-height:500px;
}

/* ---- Mobile ---- */
@media (max-width:780px){
    .aurora-header-row{grid-template-columns:1fr;gap:.75rem;text-align:center}
    .aurora-nav{justify-content:center}
    .aurora-main{padding:2rem 1rem 3rem}
    .aurora-hero{padding:2rem 1rem 1rem}
    .aurora-reading{grid-template-columns:1fr;text-align:center;gap:.75rem;padding:1.5rem}
    .aurora-reading-secondary{border-top:1px solid color-mix(in srgb, var(--color-text) 8%, transparent);padding-top:.75rem}
}