/* ── APP CARDS GRID ─────────────────────────────────────── */

.apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--max-width);
  margin: 1.8rem auto 0;
  padding: 0 1.5rem;
}

@media (max-width: 600px) {
  .apps-grid { grid-template-columns: 1fr; }
}


/* ── BASE CARD ── */
.app-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  flex-direction: column; /* important for vertical stacking */
  animation: fadeUp 0.8s ease both;
  transition: border-color 0.3s, transform 0.28s cubic-bezier(0.34,1.4,0.64,1), box-shadow 0.3s;
  cursor: pointer;
  text-decoration: none;

  height: auto;      /* let content determine height */
  min-height: 0;     /* remove any enforced min-height */
  background: rgba(60, 38, 35, 0.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

@media (min-width: 600px) { .app-card { min-height: 450px; } }



/* Portrait card hover — slight lift */
.app-card--gold:hover,
.app-card--star:hover,
.app-card--drone:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Per-card border accent on hover */
.app-card--gold:hover  { border-color: rgba(232,129,42,0.5); }
.app-card--star:hover  { border-color: rgba(126,184,247,0.45); }
.app-card--tri:hover   { border-color: rgba(232,129,42,0.4); }
.app-card--drone:hover { border-color: rgba(45,212,191,0.45); }

/* Animation stagger */
.app-card--gold  { animation-delay: 0.08s; }
.app-card--star  { animation-delay: 0.16s; }
.app-card--drone { animation-delay: 0.24s; }
.app-card--tri   { animation-delay: 0.32s; }

/* ── TOP ACCENT BAR (replaces the old sky gradient as primary device) ── */
.app-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  transition: opacity 0.3s;
  opacity: 0.6;
}
.app-card:hover::before { opacity: 1; }

.app-card--gold::before  { background: linear-gradient(90deg, transparent 0%, var(--amber) 30%, var(--gold) 70%, transparent 100%); }
.app-card--star::before  { background: linear-gradient(90deg, transparent 0%, #4a7fc8 30%, var(--star) 70%, transparent 100%); }
.app-card--tri::before   { background: linear-gradient(90deg, transparent 0%, var(--amber) 40%, var(--star) 80%, transparent 100%); }
.app-card--drone::before { background: linear-gradient(90deg, transparent 0%, var(--teal) 40%, #22d3ee 80%, transparent 100%); }

/* ── SKY ATMOSPHERE UPDATED ── */
.app-card--gold .app-card__sky {
  background:
    radial-gradient(ellipse 140% 50% at 50% 120%, rgba(232,129,42,0.35) 0%, transparent 60%),
    radial-gradient(ellipse 80% 40% at 20% 115%, rgba(245,197,24,0.25) 0%, transparent 50%),
    linear-gradient(to bottom, #1e0d05 0%, #2a0f04 55%, rgba(60,38,35,0.85) 100%);
}

.app-card--star .app-card__sky {
  background:
    radial-gradient(ellipse 140% 50% at 50% -10%, rgba(70,150,245,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 15% 5%, rgba(120,100,230,0.18) 0%, transparent 55%),
    linear-gradient(to bottom, #05070f 0%, #0a0f1c 50%, rgba(30,20,18,0.85) 100%);
}

.app-card--tri .app-card__sky {
  background:
    radial-gradient(ellipse 100% 55% at 0% 50%, rgba(232,129,42,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 100% 50%, rgba(70,150,245,0.12) 0%, transparent 55%),
    linear-gradient(to bottom, #0d0702 0%, #1a0b05 55%, rgba(30,20,18,0.85) 100%);
}

.app-card--drone .app-card__sky {
  background:
    radial-gradient(ellipse 140% 45% at 50% -5%, rgba(45,212,191,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 80% 35% at 80% 15%, rgba(0,180,200,0.12) 0%, transparent 55%),
    linear-gradient(to bottom, #03070c 0%, #050d12 50%, rgba(30,20,18,0.85) 100%);
}

/* ── CARD INNER ── */
.app-card__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1rem 0;
}

/* Portrait cards: CTA lives in a separate bottom bar */
.app-card--gold .app-card__inner,
.app-card--star .app-card__inner,
.app-card--drone .app-card__inner {
  padding-bottom: 0;
}


/* ── CARD TYPOGRAPHY ── */
.app-card__eyebrow {
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.app-card--gold .app-card__eyebrow  { color: var(--amber); }
.app-card--star .app-card__eyebrow  { color: var(--star); }
.app-card--tri .app-card__eyebrow   { color: var(--amber); }
.app-card--drone .app-card__eyebrow { color: var(--teal); }

.app-card__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.1rem, 4vw, 2.1rem); /* smaller max and min */
  letter-spacing: 0.12em;                /* slightly tighter */
  text-transform: uppercase;
  line-height: 1.1;                      /* more breathing room */
  margin-bottom: 0.75rem;
  word-wrap: break-word;                 /* prevent overflow on long words */
  color: var(--text);
}

/* Only shrink Dronecast title slightly */
#card-drone .app-card__name {
  font-size: clamp(1.8rem, 4.5vw, 2.6rem); /* slightly smaller max/min */
  line-height: 1.2;                          /* optional, better spacing */
}

.app-card__name em { font-style: normal; }
.app-card--gold .app-card__name em   { color: var(--amber); }
.app-card--star .app-card__name em   { color: var(--star); }
.app-card--tri .app-card__name .tri  { color: var(--amber); }
.app-card--tri .app-card__name .cast { color: var(--star); }
.app-card--drone .app-card__name em  { color: var(--teal); }

.app-card__desc {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 1.4rem;
  max-width: 26ch;
}


/* ── FEATURES LIST ── */
.app-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-bottom: 0;
  border-top: 1px solid var(--faint);
}

.app-card__features li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.51rem;
  letter-spacing: 0.07em;
  color: var(--muted);
  line-height: 1.3;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--faint);
}

.app-card__features li:last-child { border-bottom: none; }


@media (max-width: 480px) {
  .app-card__features li:nth-child(n+4) { display: none; }
}

.feat-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.6;
}

.app-card--gold .feat-dot  { background: var(--amber); }
.app-card--star .feat-dot  { background: var(--star); }
.app-card--tri .feat-dot   { background: var(--amber); }
.app-card--drone .feat-dot { background: var(--teal); }

/* ── CARD CTA — bottom bar for portrait cards ── */
.app-card__cta-bar {
  position: relative;
  z-index: 1;
  margin-top: auto;
  border-top: 1px solid var(--faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.8rem;
  transition: background 0.25s;
}

.app-card--gold .app-card__cta-bar  { background: rgba(232,129,42,0.05); }
.app-card--star .app-card__cta-bar  { background: rgba(126,184,247,0.05); }
.app-card--drone .app-card__cta-bar  { background: rgba(126,184,247,0.05); }
.app-card--gold:hover .app-card__cta-bar { background: rgba(232,129,42,0.1); }
.app-card--star:hover .app-card__cta-bar { background: rgba(126,184,247,0.08); }
.app-card--drone:hover .app-card__cta-bar { background: rgba(126,184,247,0.08); }

.app-card__cta-label {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

.app-card--gold:hover .app-card__cta-label { color: var(--amber); }
.app-card--star:hover .app-card__cta-label { color: var(--star); }
.app-card--star:hover .app-card__cta-label { color: var(--teal); }

.app-card__cta-arrow {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--dimmed);
  transition: transform 0.25s, color 0.2s;
}

.app-card--gold:hover .app-card__cta-arrow { color: var(--amber); transform: translateX(4px); }
.app-card--star:hover .app-card__cta-arrow { color: var(--star);  transform: translateX(4px); }
.app-card--star:hover .app-card__cta-arrow { color: var(--teal);  transform: translateX(4px); }



.app-card__btn:active { transform: scale(0.97); }


.app-card--drone .app-card__btn {
  background: teal;
  color: var(--muted);
  border: 1px solid var(--border);
}


/* ── FEATURE PILLS (wide cards) ── */
.card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}

.card-pill {
  font-family: var(--mono);
  font-size: 0.44rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 20px;
  color: var(--dimmed);
}



/* ── THINGS NEEDED TO KEEP FROM REGULAR ── */
    /* One plain-English sentence loaded from Open-Meteo on page load.
       Hides itself gracefully if the fetch fails. */
    .live-line {
      display: none; /* shown by JS once data loads */
      font-family: var(--mono);
      font-size: 0.56rem;
      letter-spacing: 0.08em;
      line-height: 1.6;
      padding: 0.6rem 0.9rem;
      border-radius: 2px;
      margin-bottom: 0.4rem;
      border-left: 2px solid;
      flex: 1;
    }

    .live-line.loaded { display: block;  height: 2px; }
    .app-card--gold  .live-line { color: rgba(240,238,232,0.65); background: rgba(232,129,42,0.07); border-color: rgba(232,129,42,0.35); }
    .app-card--star  .live-line { color: rgba(240,238,232,0.65); background: rgba(126,184,247,0.07); border-color: rgba(126,184,247,0.3); }
    .app-card--drone .live-line { color: rgba(240,238,232,0.65); background: rgba(77,208,225,0.07);  border-color: rgba(77,208,225,0.3); }
    /* Pulsing placeholder while loading */
    .live-line.fetching { display: block; animation: pulse 1.4s ease infinite; color: var(--dimmed); background: transparent; border-color: var(--border); }

    .app-card__btn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.9rem 1.4rem; border-radius: 2px; border: none; cursor: pointer; min-height: 52px; transition: opacity 0.2s, transform 0.15s; text-decoration: none; align-self: stretch; margin-bottom: 1rem; }
    @media (min-width: 680px) { .card-full .app-card__btn { align-self: flex-start; } }
    .app-card__btn:active { transform: scale(0.98); }
    .app-card--gold  .app-card__btn { background: linear-gradient(135deg, var(--amber) 0%, var(--gold) 100%); color: #100806; }
    .app-card--star  .app-card__btn { background: linear-gradient(135deg, #2a4a8a 0%, var(--star) 100%); color: #04060e; }
    .app-card--drone .app-card__btn { background: linear-gradient(135deg, #4dd0e1  0%, #4dd0e1 100%); color: #04060e; }
 

     .app-card__eyebrow { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 0.6rem; }
    .app-card--gold  .app-card__eyebrow { color: var(--amber); }
    .app-card--star  .app-card__eyebrow { color: var(--star); }
    .app-card--drone .app-card__eyebrow { color: #4dd0e1; }

     .app-card__name { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,6vw,3.4rem); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1; margin-bottom: 0.7rem; color: var(--text); }
    /* h2 inside cards — same visual style, proper semantics for Google */
    .app-card__name h2 { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }
    .app-card__name em { font-style: normal; }
    .app-card--gold  .app-card__name em { color: var(--amber); }
    .app-card--star  .app-card__name em { color: var(--star); }
    .app-card--drone .app-card__name em { color: #4dd0e1; }

    /* ── APP CARDS GRID DONE ─────────────────────────────────────── */

 

  /* ── FAQ ──
       ============================================================
       CITY-SPECIFIC: Rewrite all FAQ q/a for each new city
       ============================================================ */
    .faq-wrap { width: 100%; max-width: 900px; margin: 2rem auto 0; padding: 0 1.2rem; }
    .faq-item { border-top: 1px solid var(--border); }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; padding: 1.1rem 0; font-family: var(--serif); font-weight: 300; font-size: 1.05rem; color: var(--text); text-align: left; cursor: pointer; transition: color 0.2s; min-height: 48px; }
    .faq-q:hover { color: var(--amber); }
    .faq-arrow { font-family: var(--mono); font-size: 0.7rem; color: var(--dimmed); transition: transform 0.25s, color 0.2s; flex-shrink: 0; margin-top: 4px; }
    .faq-item.open .faq-arrow { transform: rotate(45deg); color: var(--amber); }
    .faq-a { font-family: var(--serif); font-weight: 300; font-size: 0.97rem; line-height: 1.8; color: var(--muted); max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding-bottom 0.2s; }
    .faq-item.open .faq-a { max-height: 400px; padding-bottom: 1.1rem; }
    .faq-a a { color: var(--amber); text-decoration: none; }
    .faq-a a:hover { text-decoration: underline; }

       /* ── Prose ──
       ============================================================
       CITY-SPECIFIC: Rewrite every paragraph for each new city.
       Keywords: [City] sunset photography · [City] golden hour
                 [City] astrophotography · drone flying conditions [City]
       ============================================================ */
    .prose-wrap { width: 100%; max-width: 900px; margin: 2rem auto 0; padding: 0 1.2rem; }
    .prose-wrap p { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; line-height: 1.85; color: var(--muted); margin-bottom: 1.1rem; max-width: 68ch; }
    .prose-wrap p:last-child { margin-bottom: 0; }
    .prose-wrap strong { color: var(--text); font-weight: 400; }

      /* ============================================================
       CITY-SPECIFIC: breadcrumb .current text, h1 .city-name, hero-sub
       ============================================================ */
    .breadcrumb { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmed); margin-bottom: 1.6rem; display: flex; align-items: center; gap: 0.5rem; }
    .breadcrumb a { color: var(--dimmed); text-decoration: none; transition: color 0.2s; }
    .breadcrumb a:hover { color: var(--amber); }
    .breadcrumb .current { color: var(--amber); }
    .live-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.48rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 1.1rem; }
    .live-dot { width: 5px; height: 5px; background: var(--teal); border-radius: 50%; animation: pulse 2s ease infinite; }
    .city-header h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem,8vw,5rem); letter-spacing: 0.06em; line-height: 1.05; margin-bottom: 0.9rem; color: var(--text); }
    .city-header h1 .city-name { color: var(--amber); }
    .city-header h1 em { font-style: italic; color: var(--muted); }
    .hero-sub { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dimmed); line-height: 2; max-width: 54ch; }

    /* ── Section rule — identical to index ── */
    .section-rule { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 900px; margin: 2.8rem auto 0; padding: 0 1.2rem; }
    .section-rule::before, .section-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--border), transparent); }
    .section-rule span { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dimmed); white-space: nowrap; }

    /* ── Page hero ── */
    .city-header { width: 100%; max-width: 900px; margin: 0 auto; padding: clamp(2rem,5vw,3rem) 1.2rem 0; animation: fadeDown 0.9s ease both; }



/* ── Pasted from CHI ── */

    /* ── Prose ──
       ============================================================
       CITY-SPECIFIC: Rewrite every paragraph for each new city.
       Keywords: [City] sunset photography · [City] golden hour
                 [City] astrophotography · drone flying conditions [City]
       ============================================================ */
    .prose-wrap { width: 100%; max-width: 900px; margin: 2rem auto 0; padding: 0 1.2rem; }
    .prose-wrap p { font-family: var(--serif); font-weight: 300; font-size: 1.05rem; line-height: 1.85; color: var(--muted); margin-bottom: 1.1rem; max-width: 68ch; }
    .prose-wrap p:last-child { margin-bottom: 0; }
    .prose-wrap strong { color: var(--text); font-weight: 400; }

    /* ── FAQ ──
       ============================================================
       CITY-SPECIFIC: Rewrite all FAQ q/a for each new city
       ============================================================ */
    .faq-wrap { width: 100%; max-width: 900px; margin: 2rem auto 0; padding: 0 1.2rem; }
    .faq-item { border-top: 1px solid var(--border); }
    .faq-item:last-child { border-bottom: 1px solid var(--border); }
    .faq-q { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; padding: 1.1rem 0; font-family: var(--serif); font-weight: 300; font-size: 1.05rem; color: var(--text); text-align: left; cursor: pointer; transition: color 0.2s; min-height: 48px; }
    .faq-q:hover { color: var(--amber); }
    .faq-arrow { font-family: var(--mono); font-size: 0.7rem; color: var(--dimmed); transition: transform 0.25s, color 0.2s; flex-shrink: 0; margin-top: 4px; }
    .faq-item.open .faq-arrow { transform: rotate(45deg); color: var(--amber); }
    .faq-a { font-family: var(--serif); font-weight: 300; font-size: 0.97rem; line-height: 1.8; color: var(--muted); max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding-bottom 0.2s; }
    .faq-item.open .faq-a { max-height: 400px; padding-bottom: 1.1rem; }
    .faq-a a { color: var(--amber); text-decoration: none; }
    .faq-a a:hover { text-decoration: underline; }

    /* ── City directory ──
       ============================================================
       Add chips as you build new city pages.
       Mark current city: class="city-chip current"
       Keep this on every city page — drives internal linking.
       ============================================================ --> */
    .city-dir { width: 100%; max-width: 900px; margin: 2rem auto 0; padding: 0 1.2rem; }
    .city-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
    .city-chip { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.4rem 0.9rem; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,0.02); color: var(--dimmed); text-decoration: none; transition: color 0.2s, border-color 0.2s; min-height: 36px; display: flex; align-items: center; }
    .city-chip:hover { color: var(--text); border-color: rgba(240,238,232,0.22); }
    .city-chip.current { color: var(--amber); border-color: rgba(232,129,42,0.4); background: rgba(232,129,42,0.05); }

    /* ── Email strip — identical to index ── */
    .email-strip { width: 100%; max-width: 900px; margin: 3rem auto 2.5rem; background: rgba(11,16,32,0.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(245,197,24,0.14); border-radius: 14px; padding: 1.8rem 2rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem; position: relative; overflow: hidden; }
    .email-strip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 5%, #f5c518 40%, #7eb8f7 60%, transparent 95%); opacity: 0.55; }
    .email-strip::after { content: ''; position: absolute; left: -40px; top: -50px; width: 160px; height: 160px; background: radial-gradient(circle, rgba(245,197,24,0.07) 0%, transparent 70%); pointer-events: none; }
    .es-icon { font-size: 1.5rem; flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(245,197,24,0.4)); line-height: 1; }
    .es-text h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 400; color: var(--text); margin-bottom: 0.35rem; white-space: nowrap; }
    .es-text p { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.06em; color: var(--dimmed); line-height: 1.8; }
    .es-form { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
    .es-form input { background: rgba(255,255,255,0.04); border: 1px solid rgba(126,184,247,0.2); border-radius: 2px; padding: 0.62rem 1rem; color: var(--text); font-family: var(--mono); font-size: 0.6rem; width: 200px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
    .es-form input::placeholder { color: var(--dimmed); }
    .es-form input:focus { border-color: rgba(245,197,24,0.45); box-shadow: 0 0 0 3px rgba(245,197,24,0.07); }
    .es-form button { background: linear-gradient(135deg, #f5c518, #e8812a); border: none; border-radius: 2px; padding: 0.62rem 1.15rem; color: #06080f; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; white-space: nowrap; transition: opacity 0.2s, transform 0.15s; }
    .es-form button:hover { opacity: 0.88; transform: translateY(-1px); }
    .es-success { display: none; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--star); white-space: nowrap; }
    @media (max-width: 680px) {
      .email-strip { grid-template-columns: auto 1fr; grid-template-rows: auto auto; padding: 1.4rem; }
      .email-strip .es-form { grid-column: 1 / -1; width: 100%; }
      .email-strip .es-form input { flex: 1; width: auto; }
    }