/* =========================================================
   SMARTER APPLIANCES
   COVERAGE PAGE

   Converted from:
   src/routes/coverage.tsx
   ========================================================= */

:root {
    --coverage-obsidian: oklch(0.168 0.020 220);
    --coverage-mint: oklch(0.778 0.1454 169.75);
    --coverage-mint-dark: oklch(0.6775 0.1257 170.29);
    --coverage-paper: oklch(0.972 0.006 80);
    --coverage-warm: oklch(0.92 0.009 80);

    --coverage-border-5:
        color-mix(
            in oklab,
            var(--coverage-obsidian) 5%,
            transparent
        );

    --coverage-border-10:
        color-mix(
            in oklab,
            var(--coverage-obsidian) 10%,
            transparent
        );

    --coverage-text-60:
        color-mix(
            in oklab,
            var(--coverage-obsidian) 60%,
            transparent
        );

    --coverage-max-width: 1280px;
}


/* =========================================================
   BASE
   ========================================================= */

.coverage-page {
    width: 100%;
    overflow-x: hidden;

    background: var(--coverage-paper);
    color: var(--coverage-obsidian);

    font-family: "DM Sans", sans-serif;
}


.coverage-page h1,
.coverage-page h2,
.coverage-page h3 {
    font-family: "Space Grotesk", sans-serif;
}


.coverage-container {
    width: 100%;
    max-width: var(--coverage-max-width);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   REVEAL

   Same animation used by the Vite project
   ========================================================= */

@keyframes coverageReveal {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.coverage-reveal {
    animation:
        coverageReveal
        0.8s
        cubic-bezier(0.16, 1, 0.3, 1)
        both;
}


/* =========================================================
   HERO

   Vite:
   border-b border-foreground/5
   px-6 py-24
   ========================================================= */

.coverage-hero {
    padding: 96px 24px;

    border-bottom:
        1px solid
        var(--coverage-border-5);
}


.coverage-hero__eyebrow {
    margin-bottom: 24px;

    color: var(--coverage-mint-dark);

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 16px;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


.coverage-hero__title {
    max-width: 18ch;

    margin: 0;

    color: var(--coverage-obsidian);

    font-size: 48px;
    font-weight: 700;

    line-height: 0.95;

    letter-spacing: -0.05em;

    text-wrap: balance;
}


.coverage-hero__description {
    max-width: 58ch;

    margin: 32px 0 0;

    color: var(--coverage-text-60);

    font-family: "DM Sans", sans-serif;

    font-size: 18px;
    font-weight: 400;

    line-height: 1.625;
}


/* =========================================================
   COVERAGE MAP SECTION

   Vite:
   px-6 py-24
   ========================================================= */

.coverage-map-section {
    padding: 96px 24px;
}


.coverage-map-section__heading {
    margin-bottom: 40px;
}


.coverage-map-section__eyebrow {
    margin-bottom: 16px;

    color: var(--coverage-mint-dark);

    font-family: "Space Grotesk", sans-serif;

    font-size: 12px;
    font-weight: 700;

    line-height: 16px;

    text-transform: uppercase;

    letter-spacing: 0.1em;
}


.coverage-map-section__title {
    max-width: 24ch;

    margin: 0;

    color: var(--coverage-obsidian);

    font-family: "Space Grotesk", sans-serif;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.025em;

    text-wrap: balance;
}


.coverage-map-section__description {
    max-width: 58ch;

    margin: 16px 0 0;

    color: var(--coverage-text-60);

    font-family: "DM Sans", sans-serif;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.625;
}


/* =========================================================
   MAP

   Vite:
   overflow-hidden
   rounded-sm
   border border-foreground/10

   iframe:
   h-[70vh]
   min-h-[480px]
   w-full
   ========================================================= */

.coverage-map {
    width: 100%;

    overflow: hidden;

    border:
        1px solid
        var(--coverage-border-10);

    border-radius: 2px;

    background: var(--coverage-warm);
}


.coverage-map__iframe {
    display: block;

    width: 100%;
    height: 70vh;

    min-height: 480px;

    border: 0;
}


/* =========================================================
   COVERAGE AREA GRID

   Vite:
   px-6 pb-24
   gap-px
   border
   bg-foreground/10

   sm:grid-cols-2
   lg:grid-cols-4
   ========================================================= */

.coverage-areas {
    padding: 0 24px 96px;
}


.coverage-areas__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr);

    gap: 1px;

    padding: 1px;

    border:
        1px solid
        var(--coverage-border-10);

    background: var(--coverage-border-10);
}


.coverage-area-card {
    padding: 32px;

    background: var(--coverage-paper);
}


.coverage-area-card__dot {
    display: block;

    width: 6px;
    height: 6px;

    margin-bottom: 12px;

    border-radius: 9999px;

    background: var(--coverage-mint);
}


.coverage-area-card__title {
    margin: 0;

    color: var(--coverage-obsidian);

    font-family: "Space Grotesk", sans-serif;

    font-size: 18px;
    font-weight: 700;

    line-height: 28px;
}


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

   Vite:
   bg-warm
   px-6 py-24
   ========================================================= */

.coverage-cta {
    padding: 96px 24px;

    background: var(--coverage-warm);
}


.coverage-cta__inner {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
    justify-content: space-between;

    gap: 32px;
}


.coverage-cta__title {
    max-width: 24ch;

    margin: 0 0 12px;

    color: var(--coverage-obsidian);

    font-family: "Space Grotesk", sans-serif;

    font-size: 30px;
    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -0.025em;

    text-wrap: balance;
}


.coverage-cta__description {
    max-width: 52ch;

    margin: 0;

    color: var(--coverage-text-60);

    font-family: "DM Sans", sans-serif;

    font-size: 16px;

    line-height: 1.625;
}


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

   Vite:
   glow-mint
   bg-mint
   px-8 py-4
   text-sm
   font-bold
   tracking-widest
   ========================================================= */

.coverage-cta__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 16px 32px;

    border-radius: 2px;

    background: var(--coverage-mint);

    color: var(--coverage-obsidian);

    font-family: "DM Sans", sans-serif;

    font-size: 14px;
    font-weight: 700;

    line-height: 20px;

    letter-spacing: 0.1em;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.coverage-cta__button:hover {
    color: var(--coverage-obsidian);

    box-shadow:
        0 0 30px
        color-mix(
            in oklab,
            var(--coverage-mint) 45%,
            transparent
        );
}


/* =========================================================
   SM = Tailwind 640px
   ========================================================= */

@media (min-width: 640px) {

    .coverage-areas__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MD = Tailwind 768px
   ========================================================= */

@media (min-width: 768px) {

    .coverage-cta__inner {
        flex-direction: row;

        align-items: center;
    }

}


/* =========================================================
   LG = Tailwind 1024px
   ========================================================= */

@media (min-width: 1024px) {

    .coverage-hero__title {
        font-size: 60px;
    }


    .coverage-areas__grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

}


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

@media (max-width: 575px) {

    .coverage-hero {
        padding: 72px 20px;
    }


    .coverage-hero__title {
        font-size: 42px;
    }


    .coverage-hero__description {
        font-size: 17px;
    }


    .coverage-map-section {
        padding:
            72px
            20px;
    }


    .coverage-areas {
        padding:
            0
            20px
            72px;
    }


    .coverage-cta {
        padding:
            72px
            20px;
    }


    .coverage-map__iframe {
        min-height: 420px;
    }


    .coverage-area-card {
        padding: 28px;
    }


    .coverage-cta__button {
        width: 100%;
    }

}