/* =========================================
   SERVICE AREA PAGE  —  servicearea.css
   Matches screenshot:
   - Hero with yellow underline
   - "Brooklyn" centered heading
   - 4-col CSS-columns alpha list
   - Cyan italic letter + italic area links
   ========================================= */

:root {
    --sa-cyan:   #29C3D4;
    --sa-yellow: #e8a020;
    --sa-dark:   #1a1a1a;
    --sa-text:   #444;
    --sa-white:  #ffffff;
    --sa-bg:     #ffffff;
}

/* =========================================
   1. HERO BANNER
   ========================================= */
.sa-hero {
    position: relative;
    width: 100%;
    height: 220px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sa-hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.48);
}

.sa-hero-content {
    position: relative;
    z-index: 2;
}

.sa-hero-content h1 {
    color: #fff;
    font-size: 40px;
    font-weight: 900;
    margin: 0 0 12px;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
    font-family: 'Georgia', serif;
    letter-spacing: 1px;
}

/* Short yellow underline — exactly like screenshot */
.sa-hero-line {
    width: 54px;
    height: 4px;
    background: var(--sa-yellow);
    border-radius: 2px;
    margin: 0 auto;
}

/* =========================================
   2. PAGE BODY
   ========================================= */
.sa-page {
    background: var(--sa-bg);
    padding: 50px 0 70px;
}

.sa-container {
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ── Region heading ("Brooklyn") ── */
.sa-region-title {
    text-align: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--sa-dark);
    margin: 0 0 40px;
    font-family: 'Georgia', serif;
}

/* =========================================
   3. ALPHABETICAL GRID
   CSS multi-column so groups flow naturally
   and short letter groups sit next to taller
   ones — exactly like the screenshot
   ========================================= */
.sa-alpha-grid {
    columns: 4;
    column-gap: 32px;
}

/* Each letter block breaks across columns cleanly */
.sa-alpha-col-item {
    break-inside: avoid;
    margin-bottom: 28px;
}

/* Cyan italic letter heading — matches screenshot */
.sa-letter {
    display: block;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    color: var(--sa-cyan);
    margin-bottom: 4px;
    letter-spacing: .5px;
}

/* Area links list */
.sa-area-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sa-area-list li {
    line-height: 1.6;
    margin: 0;
}

/* Italic area name links — matches screenshot */
.sa-area-list a {
    display: inline-block;
    font-size: 13px;
    font-style: italic;
    color: var(--sa-text);
    text-decoration: none;
    line-height: 1.7;
    transition: color .2s;
}

.sa-area-list a:hover {
    color: var(--sa-cyan);
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 900px) {
    .sa-alpha-grid { columns: 3; column-gap: 24px; }
}

@media (max-width: 640px) {
    .sa-hero          { height: 170px; }
    .sa-hero-content h1 { font-size: 30px; }
    .sa-alpha-grid    { columns: 2; column-gap: 20px; }
    .sa-region-title  { font-size: 22px; margin-bottom: 28px; }
}

@media (max-width: 400px) {
    .sa-alpha-grid    { columns: 1; }
}