/* ==========================================================
   Aura Limo — city page
   Replaces the inline styles that were on every section.
   Those inline blocks added roughly 12KB to every page and
   could not be cached; this file is cached once.
   ========================================================== */

:root {
    --gold: #d4af37;
    --gold-soft: rgba(212, 175, 55, .15);
    --ink: #111;
    --body: #666;
    --line: #eee;
}

.wrap { width: min(1200px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto; }

/* Breadcrumb — was missing entirely; it feeds the BreadcrumbList schema
   and gives Google an explicit hierarchy for 40 city pages. */
.crumbs { padding: .9rem 0; border-bottom: 1px solid var(--line); background: #fff; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0;
             list-style: none; font-size: .78rem; color: var(--body); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: #ccc; }
.crumbs a { color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--gold); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.btn { display: inline-flex; align-items: center; justify-content: center;
       padding: .85rem 1.6rem; font-weight: 600; font-size: .95rem;
       border-radius: 8px; text-decoration: none; border: 1px solid transparent; }
.btn-gold { background: var(--gold); color: #1a1408; }
.btn-gold:hover { background: #c19f2e; }
.btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.btn-outline:hover { background: rgba(255,255,255,.12); }

/* Section rhythm. The old inline padding was 120px top and bottom on
   several sections, which pushed real content below three screens. */
.city-intro, .services-3, .faq-block, .other-areas {
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.city-intro__text { max-width: 46rem; font-size: 1.02rem; line-height: 1.85; color: var(--body); }
.city-intro__text p { margin: 0 0 1.1rem; }
.city-intro__text strong { color: var(--ink); }

.editor-note { margin-top: 1.5rem; padding: 1rem 1.25rem; font-size: .9rem;
               background: #fff8e5; border-left: 3px solid var(--gold); }

.services-3 { background: #fafafa; border-top: 1px solid var(--gold-soft); }
.services-3 h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); color: var(--ink);
                 margin: 0 0 2rem; }
.services-3__grid { display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.svc-card { background: #fff; border: 1px solid var(--gold-soft); border-radius: 16px;
            padding: 1.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.svc-card h3 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--ink); }
.svc-card p { margin: 0 0 1rem; font-size: .95rem; line-height: 1.75; color: var(--body); }
.svc-card a { color: var(--gold); font-weight: 600; font-size: .9rem; text-decoration: none; }
.svc-card a:hover { text-decoration: underline; }

/* FAQ — visible text, not hidden behind JS, so the FAQPage markup
   matches what a user actually sees. */
.faq-block h2 { font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem); color: var(--ink); margin: 0 0 1.5rem; }
.faq-list { max-width: 46rem; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 1rem;
                    padding: 1.15rem 0; cursor: pointer; font-weight: 600;
                    color: var(--ink); list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); font-size: 1.4rem; line-height: 1; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list p { margin: 0; padding-bottom: 1.15rem; color: var(--body); line-height: 1.8; }

/* Other areas — horizontal chips instead of a 40-item link wall */
.other-areas { background: #2a2011; }
.other-areas h2 { color: #fffdf9; font-size: .85rem; letter-spacing: 1.5px;
                  text-transform: uppercase; margin: 0 0 1.25rem; }
.area-rail { display: flex; flex-wrap: wrap; gap: .5rem; }
.area-rail a { padding: .42rem .85rem; font-size: .85rem; color: var(--gold);
               background: rgba(212,175,55,.08); border: 1px solid var(--gold-soft);
               border-radius: 999px; text-decoration: none; white-space: nowrap; }
.area-rail a:hover { background: var(--gold); color: #1a1408; }

@media (max-width: 767px) {
    .area-rail { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .4rem;
                 scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .area-rail::-webkit-scrollbar { display: none; }
    .area-rail a { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================
   RESTORED SECTIONS
   These were inline-styled in the original; the rules live here now
   so they download once and cache, instead of adding ~12KB to every
   page view. Appearance is unchanged.
   ========================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
           overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Keyword matrix — tags, not self-links */
.kw-matrix { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: #fafafa;
             border-top: 1px solid var(--gold-soft); }
.kw-matrix h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); color: var(--ink);
                margin: 0 0 2rem; }
.kw-matrix__grid { display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.kw-card { background: #fff; border: 1px solid var(--gold-soft); border-radius: 20px;
           padding: 1.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.kw-card h3 { margin: 0 0 1rem; padding-bottom: .75rem; font-size: 1.15rem; color: var(--ink);
              border-bottom: 2px solid var(--gold); }

.kw-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.kw-tags li { padding: .4rem .8rem; font-size: .8rem; font-weight: 600; color: var(--gold);
              background: rgba(212,175,55,.10); border: 1px solid var(--gold-soft);
              border-radius: 50px; }

/* Airport network */
.airport-network { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section-title { max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-title span { display: inline-block; color: var(--gold); font-size: .78rem;
                      font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
                      margin-bottom: .6rem; }
.section-title h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); color: var(--ink);
                    margin: 0 0 .75rem; }
.section-title p { color: var(--body); margin: 0; line-height: 1.8; }

.airport-grid { width: min(1200px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto;
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }

.airport-card { background: #fff; border: 1px solid var(--gold-soft); border-radius: 20px;
                padding: 1.75rem; box-shadow: 0 10px 30px rgba(0,0,0,.04); }
.airport-card h3 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--ink); }
.airport-card p { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.75; color: var(--body); }
.airport-card span { display: inline-block; margin-bottom: 1rem; padding: .3rem .7rem;
                     font-size: .72rem; font-weight: 700; letter-spacing: .06em;
                     text-transform: uppercase; color: var(--gold);
                     background: rgba(212,175,55,.10); border-radius: 50px; }
.airport-link { display: block; color: var(--gold); font-weight: 600; font-size: .9rem;
                text-decoration: none; }
.airport-link:hover { text-decoration: underline; }

/* Comparison — now a real <table>, which screen readers and Google
   can both parse as tabular data. The original used stacked divs. */
.comparison-section { padding-block: clamp(2.5rem, 6vw, 4.5rem); background: #fafafa; }
.comparison-table { width: min(900px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto;
                    border-collapse: collapse; background: #fff;
                    border: 1px solid var(--gold-soft); border-radius: 16px; overflow: hidden; }
.comparison-table th, .comparison-table td { padding: 1rem 1.25rem; text-align: left;
                                             border-bottom: 1px solid var(--line);
                                             font-size: .95rem; }
.comparison-table thead th { background: #2a2011; color: #fffdf9; font-size: .8rem;
                             letter-spacing: .06em; text-transform: uppercase; }
.comparison-table tbody th { font-weight: 600; color: var(--ink); }
.comparison-table td { text-align: center; font-size: 1.1rem; }
.comparison-table .yes { color: #1a7f4b; }
.comparison-table .no  { color: #b91c1c; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }

@media (max-width: 600px) {
    .comparison-table th, .comparison-table td { padding: .75rem .6rem; font-size: .85rem; }
}