/* ==========================================================================
   LOCATION PAGES (/coimbatore, /chennai and everything under them)

   These pages are assembled from components the site already has — the course
   card, the testimonial carousel, the FAQ accordion, the enquiry form. What is
   here is only the frame around them: the banner, the section headings and the
   local-details block (address, phone, batch timings, map).

   No new palette. The same terracotta/cream tokens the content pages use, so a
   city page cannot drift away from the rest of the site when either is retouched.
   ========================================================================== */

:root {
    --hm-city-ink: #23180F;
    --hm-city-body: #4F423A;
    --hm-city-muted: #8A7466;
    --hm-city-line: #F1E6DE;
    --hm-city-brand: #A5391B;
    --hm-city-brand-deep: #7A2A11;
    --hm-city-cream: #FDFBF9;
}

/* The shared layout centres #main-content with flex and pads it 3rem; a
   full-width page needs the whole canvas, as on every other listing. */
#main-content {
    position: relative;
    display: block;
    min-height: auto;
    padding: 0;
    text-align: left;
}

/* ================================= BANNER ================================= */

.hm-city__banner {
    position: relative;
    /* The navbar floats at top:22px and is 72px tall, so it owns the first 94px. */
    padding: calc(94px + 40px) 0 48px;
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(165, 57, 27, .06) 0%, rgba(165, 57, 27, 0) 70%),
        var(--hm-city-cream);
    border-bottom: 1px solid var(--hm-city-line);
}

.hm-city__banner-title {
    margin: 0 0 10px;
    font-family: Poppins, system-ui, sans-serif;
    font-size: clamp(26px, 4.4vw, 42px);
    font-weight: 800;
    line-height: 1.18;
    color: var(--hm-city-ink);
}

.hm-city__banner-sub {
    max-width: 68ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--hm-city-body);
}

/* The breadcrumb reuses .hm-ed__crumbs, which event-details.css styles. On a
   page that does not load that file the trail still has to read as a trail. */
.hm-city__banner .hm-ed__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--hm-city-muted);
}

.hm-city__banner .hm-ed__crumbs a {
    color: var(--hm-city-brand);
    text-decoration: none;
}

.hm-city__banner .hm-ed__crumbs a:hover {
    text-decoration: underline;
}

/* ================================ SECTIONS ================================ */

.hm-city-sec {
    padding: 56px 0;
}

.hm-city-sec--tint {
    background: var(--hm-city-cream);
}

.hm-city-sec__title {
    margin: 0 0 8px;
    font-family: Poppins, system-ui, sans-serif;
    font-size: clamp(21px, 3vw, 30px);
    font-weight: 700;
    color: var(--hm-city-ink);
}

.hm-city-sec__lead {
    max-width: 72ch;
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--hm-city-body);
}

/* Admin-written prose (the city introduction). It arrives as paragraphs from a
   textarea, so only the basics need styling. */
.hm-city-prose {
    max-width: 74ch;
    font-size: 15.5px;
    line-height: 1.8;
    color: var(--hm-city-body);
}

.hm-city-prose p {
    margin: 0 0 1em;
}

.hm-city-prose :last-child {
    margin-bottom: 0;
}

/* ============================= LOCAL DETAILS ============================== */

.hm-city-local {
    padding: 56px 0;
    background: var(--hm-city-cream);
    border-top: 1px solid var(--hm-city-line);
}

.hm-city-fact {
    padding: 0 0 20px;
}

.hm-city-fact:last-child {
    padding-bottom: 0;
}

.hm-city-fact__title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hm-city-muted);
}

.hm-city-fact__text {
    margin: 0;
    font-size: 15.5px;
    font-style: normal;
    line-height: 1.7;
    color: var(--hm-city-ink);
}

.hm-city-fact__text a {
    color: var(--hm-city-brand);
    text-decoration: none;
}

.hm-city-fact__list {
    margin: 0;
    padding-left: 1.1em;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--hm-city-ink);
}

/* The map keeps its own ratio and never pushes the row wider than its column —
   a width from an aspect-ratio is how the events cards broke once. */
.hm-city-map {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--hm-city-line);
    border-radius: 14px;
    background: #fff;
}

.hm-city-map iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

/* ================================= EMPTY ================================== */

/* Shown where a city has no courses with pages of their own yet. It states the
   fact rather than pretending the section is still loading. */
.hm-city-empty {
    padding: 28px;
    border: 1px dashed var(--hm-city-line);
    border-radius: 14px;
    background: #fff;
    font-size: 15px;
    line-height: 1.7;
    color: var(--hm-city-body);
}

.hm-city-empty a {
    color: var(--hm-city-brand);
}

/* ================================== CTA =================================== */

.hm-city-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--hm-city-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background .18s ease;
}

.hm-city-cta:hover,
.hm-city-cta:focus-visible {
    background: var(--hm-city-brand-deep);
    color: #fff;
}

/* ================================= MOBILE ================================= */

@media (max-width: 575.98px) {
    .hm-city__banner {
        padding: calc(94px + 24px) 0 32px;
    }

    .hm-city-sec,
    .hm-city-local {
        padding: 40px 0;
    }

    .hm-city-map iframe {
        height: 240px;
    }
}