/**
 * MyBangladesh — Homepage
 * Built to New-Desgn/Homepage.png. Loaded on every page of the main layout, after style.css: the header,
 * search pill, section headings and cards defined here are the platform's shared brand components
 * (theme.css extends them to the inner pages). Everything is namespaced .home-*.
 *
 * 1. Tokens & page   2. Header   3. Hero & search   4. Trust strip   5. Sections
 * 6. Service tiles   7. Banner carousel   8. Rails & cards   9. Phone footer   10. Motion
 */

/* ==========================================================================
   1. TOKENS & PAGE
   ========================================================================== */
/* Design tokens (--home-*) are defined for every page in theme.css */
body.page-is-homepage {
    --hh: 60px;                          /* header height (without the safe-area inset) */
    background-color: var(--color-background);
}

body.page-is-homepage .app-wrapper {
    background-color: var(--color-background);
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
}

.home-container {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--home-gutter);
}

.home-page {
    overflow-x: clip;
}

.home-page :focus-visible,
.home-header :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.home-script {
    font-family: 'Caveat', 'Hind Siliguri', cursive;
    font-weight: 700;
    line-height: 0.98;
    text-align: center;
}

.home-swoosh {
    display: block;
    width: 3.2em;
    height: auto;
    margin: 0.12em auto 0;
}

/* ==========================================================================
   2. HEADER — transparent over the hero, solid once the page scrolls
   ========================================================================== */
.top-header.home-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 60;
    padding: env(safe-area-inset-top, 0px) 0 0;
    background: transparent;
    color: var(--home-ink);
    box-shadow: none;
    transition: background-color 0.25s var(--home-ease), box-shadow 0.25s var(--home-ease);
}

.top-header.home-header.scrolled {
    background: color-mix(in srgb, var(--color-background) 90%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: 0 1px 0 var(--home-line), 0 10px 24px -18px rgba(13, 59, 44, 0.45);
}

.home-header-row {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--hh);
}

/* Brand lockup: see theme.css */

/* Primary nav (tablet and up) */
.home-nav {
    display: none;
}

.home-nav-link {
    padding: 8px 14px;
    border-radius: var(--radius-full);
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--home-ink);
    transition: background-color 0.18s var(--home-ease), color 0.18s var(--home-ease);
}

.home-nav-link:hover {
    background: color-mix(in srgb, var(--home-card) 70%, transparent);
}

.home-nav-link.is-active {
    background: var(--home-card);
    color: var(--home-brand);
    font-weight: 700;
    box-shadow: var(--home-shadow-sm);
}

/* Controls */
.home-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    min-width: 0;
}

.home-loc-pill,
.home-hbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--home-card);
    border: 1px solid color-mix(in srgb, var(--home-card) 60%, var(--home-line));
    color: var(--home-ink);
    box-shadow: var(--home-shadow-sm);
    cursor: pointer;
    transition: transform 0.18s var(--home-ease), box-shadow 0.18s var(--home-ease), background-color 0.18s var(--home-ease);
}

.home-loc-pill:hover,
.home-hbtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(13, 59, 44, 0.35);
}

.home-loc-pill {
    gap: 2px;
    max-width: 104px;
    padding: 0 5px 0 7px;
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 0;
}

.home-loc-pin {
    font-size: 16px;
    color: var(--home-brand);
    flex-shrink: 0;
}

.home-loc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-loc-caret {
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.75;
}

.home-hbtn {
    position: relative;
    width: 34px;
    flex-shrink: 0;
}

.home-hbtn .material-symbols-outlined {
    font-size: 19px;
}

/* Phones keep three controls: location, language, theme. Notifications and Login join from 768px. */
.home-hbtn--bell,
.home-login-btn {
    display: none;
}

.home-hbtn-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--home-card);
    background: var(--home-red);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

/* Dot on the bell when there is nothing to count, as drawn in the reference */
.home-hbtn--bell::after {
    content: "";
    position: absolute;
    top: 7px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--home-red);
    border: 1.5px solid var(--home-card);
}

.home-hbtn--bell:has(.home-hbtn-badge)::after {
    display: none;
}

.home-header .header-user-btn {
    height: 34px;
    padding: 2px;
    background: var(--home-card);
    border-color: color-mix(in srgb, var(--home-card) 60%, var(--home-line));
    box-shadow: var(--home-shadow-sm);
}

.home-header .header-user-menu-wrap {
    z-index: auto;
}

.home-login-btn {
    align-items: center;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: var(--home-shadow-sm);
    transition: transform 0.18s var(--home-ease), background-color 0.18s var(--home-ease);
}

.home-login-btn:hover {
    transform: translateY(-1px);
    background: var(--color-primary-container);
}

@media (max-width: 339px) {
    .home-brand-text { display: none; }
}

@media (min-width: 390px) {
    .home-header:not(.home-header--authed) .home-brand-tag { display: block; }
}

@media (min-width: 430px) {
    .home-brand-tag { display: block; }
    .home-brand-mark { width: 38px; height: 38px; }
}

/* ==========================================================================
   3. HERO & SEARCH
   ========================================================================== */
.home-hero {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding-top: calc(var(--hh) + env(safe-area-inset-top, 0px));
}

.home-hero-media {
    position: absolute;
    inset: 0 0 27px 0;                   /* the search pill straddles the lower edge */
    z-index: -1;
    overflow: hidden;
    background: #cfe8f3;
}

.home-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 80% 46%;
}

/* Left wash keeps the headline legible; bottom wash dissolves the art into the page */
.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 58%, var(--color-background) 100%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--color-background) 94%, transparent) 0%,
            color-mix(in srgb, var(--color-background) 78%, transparent) 36%,
            transparent 70%);
}

[data-theme="dark"] .home-hero-media::after {
    background:
        linear-gradient(180deg, rgba(10, 14, 12, 0.35) 0%, rgba(10, 14, 12, 0.2) 50%, var(--color-background) 100%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--color-background) 92%, transparent) 0%,
            color-mix(in srgb, var(--color-background) 72%, transparent) 40%,
            transparent 78%);
}

.home-hero-inner {
    position: relative;
    padding-top: 14px;
}

.home-hero-title {
    font-family: var(--font-family-headline);
    font-size: clamp(1.5rem, 6.7vw, 1.9375rem);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.035em;
    color: var(--home-ink);
}

.home-hero-title > span {
    display: block;
}

.home-hero-title .home-hero-accent {
    color: var(--home-red);
}

.home-hero-sub {
    margin-top: 8px;
    max-width: 15.5em;
    font-size: 0.875rem;
    line-height: 1.35;
    text-wrap: balance;
    color: color-mix(in srgb, var(--home-ink) 86%, transparent);
}

.home-hero-script {
    position: absolute;
    top: 4px;
    right: var(--home-gutter);
    width: 5em;
    font-size: 1.1875rem;
    color: var(--home-ink);
    text-shadow: 0 0 10px var(--color-background), 0 0 4px var(--color-background);
    transform: rotate(-9deg);
    transform-origin: right top;
    pointer-events: none;
}

/* Open suggestions must sit above the trust strip that follows (and overlaps) the hero */
body.search-active .home-hero {
    z-index: 3;
}

/* Search pill */
.home-search {
    position: relative;
    margin-top: 26px;
}

.home-search-box {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 54px;
    padding: 0 6px 0 16px;
    border-radius: var(--radius-full);
    background: var(--home-card);
    border: 1px solid color-mix(in srgb, var(--home-card) 60%, var(--home-line));
    box-shadow: 0 16px 36px -16px rgba(13, 59, 44, 0.42), 0 2px 8px rgba(13, 59, 44, 0.06);
    transition: box-shadow 0.2s var(--home-ease), border-color 0.2s var(--home-ease);
}

.home-search-box:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent), 0 16px 36px -16px rgba(13, 59, 44, 0.42);
}

.home-search-icon {
    font-size: 24px;
    color: var(--home-ink);
    flex-shrink: 0;
}

.home-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    font-size: 1rem;
    color: var(--color-on-surface);
}

.home-search-input::placeholder {
    color: var(--color-on-surface-variant);
    opacity: 0.8;
}

.home-search-input:focus-visible {
    outline: none;
}

.home-search-divider {
    width: 1px;
    height: 24px;
    background: var(--color-outline-variant);
    flex-shrink: 0;
}

.home-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--home-ink);
    flex-shrink: 0;
    transition: background-color 0.18s var(--home-ease);
}

.home-search-btn:hover {
    background: var(--color-surface-container);
}

.home-search-btn .material-symbols-outlined {
    font-size: 22px;
}

.home-search .search-dropdown {
    border: 1px solid var(--home-line);
    border-radius: 18px;
    box-shadow: var(--home-shadow);
    max-height: min(420px, calc(100vh - 220px));
    max-height: min(420px, calc(100dvh - 220px));
}

/* ==========================================================================
   4. TRUST STRIP
   ========================================================================== */
.home-trust-wrap {
    position: relative;
    z-index: 2;
    margin-top: 14px;
}

.home-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px 2px 13px;
    border-radius: 18px;
    background: var(--home-card);
    border: 1px solid var(--home-line);
    box-shadow: var(--home-shadow);
}

.home-trust-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0 4px;
    min-width: 0;
    text-align: center;
}

.home-trust-item + .home-trust-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 1px;
    background: var(--color-outline-variant);
    opacity: 0.6;
}

.home-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--tone) 14%, var(--home-card));
    color: var(--tone);
}

.home-trust-icon .material-symbols-outlined {
    font-size: 21px;
}

.home-tone-green  { --tone: #12894f; }
.home-tone-amber  { --tone: #f08c00; }
.home-tone-blue   { --tone: #2f7df6; }
.home-tone-purple { --tone: #9b3fd6; }
.home-tone-red    { --tone: #e3202b; }

[data-theme="dark"] .home-tone-green  { --tone: #5fd39b; }
[data-theme="dark"] .home-tone-amber  { --tone: #ffb84d; }
[data-theme="dark"] .home-tone-blue   { --tone: #7fb2ff; }
[data-theme="dark"] .home-tone-purple { --tone: #cf94f5; }
[data-theme="dark"] .home-tone-red    { --tone: #ff8a8d; }

.home-trust-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    max-width: 100%;
    font-size: 0.75rem;
    line-height: 1.22;
    color: var(--color-on-surface-variant);
}

.home-trust-text strong {
    font-family: var(--font-family-headline);
    font-weight: 700;
    color: var(--color-on-surface);
}

/* ==========================================================================
   5. SECTIONS
   ========================================================================== */
.home-section {
    margin-top: 26px;
}

.home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.home-section-title {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--home-ink);
}

/* Red underline accent on the lead section heading */
.home-section-head:not(.home-section-head--plain) .home-section-title::after {
    content: "";
    display: block;
    width: 34px;
    height: 4px;
    margin-top: 6px;
    border-radius: 4px;
    background: var(--home-red);
}

.home-section-title--icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.home-section-title--icon .material-symbols-outlined {
    color: var(--home-red);
}

.home-section-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 0.8125rem;
    color: var(--color-on-surface-variant);
}

.home-section-sub .material-symbols-outlined {
    font-size: 17px;
    color: var(--home-brand);
}

.home-section-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 0;
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--home-brand);
}

.home-section-link .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.18s var(--home-ease);
}

.home-section-link:hover .material-symbols-outlined {
    transform: translateX(3px);
}

/* ==========================================================================
   6. SERVICE TILES — a 2x2 feature card plus 12 tiles: 4 columns on phones, 8 from tablet up
   ========================================================================== */
.home-cats {
    --gap: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: var(--gap);
}

.home-cat-cell {
    min-width: 0;
}

.home-cat-cell--feature {
    grid-column: span 2;
    grid-row: span 2;
}

.home-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    padding: 12px 3px 10px;
    border-radius: 16px;
    background: linear-gradient(165deg, color-mix(in srgb, var(--cat-bg) 45%, #ffffff) 0%, var(--cat-bg) 100%);
    border: 1px solid color-mix(in srgb, var(--cat-bg) 88%, #0d3b2c);
    text-align: center;
    transition: transform 0.2s var(--home-ease), box-shadow 0.2s var(--home-ease);
}

[data-theme="dark"] .home-cat {
    background: color-mix(in srgb, var(--cat-bg) 11%, var(--color-surface-container));
    border-color: rgba(255, 255, 255, 0.07);
}

.home-cat:hover {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow-sm);
}

.home-cat-art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.home-cat-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(13, 59, 44, 0.14));
    transition: transform 0.25s var(--home-ease);
}

.home-cat:hover .home-cat-art img {
    transform: scale(1.08);
}

.home-cat-label {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.18;
    color: var(--color-on-surface);
    overflow-wrap: break-word;
}

/* Feature card */
.home-cat--feature {
    --feat-ink: #2a1c06;
    --feat-accent: #e2552b;
    position: relative;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 3px;
    padding: 14px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(160deg, #ffedc9 0%, #ffd595 100%);
    border-color: #f5cb8b;
    text-align: left;
}

[data-theme="dark"] .home-cat--feature {
    --feat-ink: #fff3dd;
    --feat-accent: #ffb37a;
    background: linear-gradient(160deg, #4a3a1c 0%, #3a2c14 100%);
    border-color: rgba(255, 213, 149, 0.18);
}

/* Dotted halo behind the artwork */
.home-cat--feature::before {
    content: "";
    position: absolute;
    left: -14%;
    top: 14%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: radial-gradient(color-mix(in srgb, var(--feat-accent) 45%, transparent) 1.1px, transparent 1.4px);
    background-size: 7px 7px;
    -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
    mask-image: radial-gradient(circle, #000 35%, transparent 70%);
    pointer-events: none;
}

.home-cat--feature .home-cat-art {
    position: absolute;
    top: 6%;
    right: 6%;
    width: 56%;
    height: auto;
    aspect-ratio: 1;
}

.home-cat--feature .home-cat-art img {
    filter: drop-shadow(0 10px 12px rgba(120, 70, 10, 0.28));
}

.home-cat-title,
.home-cat-sub {
    position: relative;
}

.home-cat-title {
    font-family: var(--font-family-headline);
    font-size: 1.375rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--feat-ink);
}

.home-cat-sub {
    max-width: calc(100% - 40px);
    font-size: 0.75rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--feat-ink) 78%, transparent);
}

.home-cat-go {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    color: #e2552b;
    box-shadow: 0 4px 10px -4px rgba(120, 70, 10, 0.45);
    transition: transform 0.2s var(--home-ease);
}

.home-cat-go .material-symbols-outlined {
    font-size: 19px;
}

.home-cat--feature:hover .home-cat-go {
    transform: translateX(3px);
}

@media (max-width: 359px) {
    .home-trust-text { font-size: 0.6875rem; }
    .home-cat-label { font-size: 0.64rem; }
    .home-cat-title { font-size: 1.1875rem; }
    .home-cat-sub { font-size: 0.6875rem; }
}

/* ==========================================================================
   7. BANNER CAROUSEL
   ========================================================================== */
.home-slider {
    position: relative;
    margin-top: 24px;
}

.home-slider-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-radius: 20px;
    box-shadow: var(--home-shadow);
    overscroll-behavior-x: contain;
}

.home-slider-track::-webkit-scrollbar {
    display: none;
}

.home-slide {
    position: relative;
    isolation: isolate;
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    min-height: 184px;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background: #06402d;
    color: #ffffff;
}

.home-slide-img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 50%;
}

.home-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg,
        rgba(4, 52, 36, 0.97) 0%,
        rgba(4, 52, 36, 0.88) 38%,
        rgba(4, 52, 36, 0.35) 64%,
        rgba(4, 52, 36, 0) 84%);
}

.home-slide-body {
    width: 64%;
    padding: 18px 0 30px 18px;
}

.home-slide-title {
    font-family: var(--font-family-headline);
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #ffffff;
    text-wrap: balance;
}

.home-slide-accent {
    display: block;
    color: var(--home-gold);
}

.home-slide-sub {
    margin-top: 7px;
    font-size: 0.78rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
}

.home-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    background: #ffffff;
    color: #0d3b2c;
    font-size: 0.8125rem;
    font-weight: 700;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
    transition: transform 0.18s var(--home-ease), box-shadow 0.18s var(--home-ease);
}

.home-slide-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.55);
}

.home-slide-cta .material-symbols-outlined {
    font-size: 17px;
    transition: transform 0.18s var(--home-ease);
}

.home-slide-cta:hover .material-symbols-outlined {
    transform: translateX(3px);
}

.home-slide .home-slide-cta:focus-visible {
    outline-color: #ffffff;
}

.home-slide-script {
    position: absolute;
    top: 50%;
    right: 12px;
    max-width: 5.4em;
    font-size: 1.125rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    transform: translateY(-58%) rotate(-10deg);
    pointer-events: none;
}

.home-slider-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.home-slider-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    cursor: pointer;
}

.home-slider-dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transition: transform 0.2s var(--home-ease), background-color 0.2s var(--home-ease);
}

.home-slider-dot.is-active::before {
    background: #ffffff;
    transform: scale(1.35);
}

.home-slider .home-slider-dot:focus-visible {
    outline-color: #ffffff;
    outline-offset: -3px;
    border-radius: 50%;
}

@media (max-width: 359px) {
    .home-slide-body { width: 78%; }
    .home-slide-script { display: none; }
}

.home-promos .promo-strip {
    margin-top: 18px;
}

/* ==========================================================================
   8. RAILS & CARDS
   ========================================================================== */
.home-rail {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--home-gutter) * -1);
    padding: 4px var(--home-gutter) 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--home-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.home-rail::-webkit-scrollbar {
    display: none;
}

/* "Around {place}" card */
.home-place {
    display: flex;
    flex-direction: column;
    flex: 0 0 172px;
    min-width: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--home-card);
    border: 1px solid var(--home-line);
    box-shadow: var(--home-shadow-sm);
    scroll-snap-align: start;
    transition: transform 0.2s var(--home-ease), box-shadow 0.2s var(--home-ease);
}

.home-place:hover {
    transform: translateY(-3px);
    box-shadow: var(--home-shadow);
}

.home-place-media {
    display: block;
    height: 96px;
    overflow: hidden;
    background: var(--color-surface-container);
}

.home-place-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);
    transition: transform 0.35s var(--home-ease);
}

.home-place:hover .home-place-media img {
    transform: scale(1.05);
}

.home-place-body {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0 10px 12px;
}

.home-place-badge {
    --tone: #e3202b;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: -18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--home-card);
    color: var(--tone);
    box-shadow: 0 4px 12px -4px rgba(13, 59, 44, 0.35);
}

.home-place-badge .material-symbols-outlined {
    font-size: 21px;
}

.home-place:nth-child(4n + 2) .home-place-badge { --tone: #d9820a; }
.home-place:nth-child(4n + 3) .home-place-badge { --tone: #2f7df6; }
.home-place:nth-child(4n + 4) .home-place-badge { --tone: #12894f; }

.home-place-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding-top: 7px;
}

.home-place-title {
    font-family: var(--font-family-headline);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-place-sub {
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--color-on-surface-variant);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reel tile */
.home-reel {
    position: relative;
    flex: 0 0 132px;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 14px;
    background: #121816;
    box-shadow: var(--home-shadow-sm);
    scroll-snap-align: start;
    transition: transform 0.2s var(--home-ease);
}

.home-reel:hover {
    transform: translateY(-3px);
}

.home-reel > img,
.home-reel-empty {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-reel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #18221e, #0f1412);
    color: #34d399;
}

.home-reel-empty .material-symbols-outlined {
    font-size: 34px;
}

.home-reel-meta {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 28px 10px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    color: #ffffff;
}

.home-reel-user {
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-reel-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.82);
}

.home-reel-views .material-symbols-outlined {
    font-size: 13px;
}

.home-jobs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

/* ==========================================================================
   9. PHONE FOOTER — legal links (the site footer is hidden on phones)
   ========================================================================== */
.home-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--home-line);
    text-align: center;
}

.home-foot-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--home-brand);
}

.home-foot-copy {
    font-size: 0.6875rem;
    color: var(--color-outline);
}

/* ==========================================================================
   TABLET (768px+)
   ========================================================================== */
@media (min-width: 768px) {
    body.page-is-homepage {
        --hh: 116px;                     /* brand row + nav row */
    }

    body.page-is-homepage .app-wrapper {
        padding-bottom: 0 !important;
    }

    body.page-is-homepage footer {
        margin-top: 56px !important;
    }

    .home-header-row {
        flex-wrap: wrap;
        align-content: center;
        row-gap: 8px;
    }

    .home-brand { gap: 10px; }
    .home-brand-mark { width: 44px; height: 44px; }
    .home-brand-name { font-size: 1.375rem; }
    .home-brand-tag { display: block; font-size: 0.6875rem; margin-top: 4px; }

    .home-nav {
        display: flex;
        align-items: center;
        gap: 2px;
        order: 3;
        flex-basis: 100%;
        margin-inline: -8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .home-header-actions { gap: 8px; }

    .home-loc-pill,
    .home-hbtn { height: 40px; }
    .home-hbtn { width: 40px; }
    .home-hbtn .material-symbols-outlined { font-size: 21px; }
    .home-loc-pill { max-width: 170px; padding: 0 10px 0 12px; font-size: 0.875rem; gap: 4px; }
    .home-loc-pin { font-size: 18px; }
    .home-hbtn--bell::after { top: 9px; right: 10px; }

    .home-hbtn--bell,
    .home-login-btn { display: inline-flex; }

    .home-header .header-user-btn {
        height: 40px;
        padding: 3px 10px 3px 4px;
        gap: 6px;
        max-width: none !important;
    }

    /* Hero */
    .home-hero-media { inset-block-end: 0; }
    .home-hero-img { object-position: 88% 58%; }

    .home-hero-media::after {
        background:
            linear-gradient(180deg, transparent 62%, var(--color-background) 100%),
            linear-gradient(90deg,
                color-mix(in srgb, var(--color-background) 95%, transparent) 0%,
                color-mix(in srgb, var(--color-background) 80%, transparent) 30%,
                transparent 62%);
    }

    [data-theme="dark"] .home-hero-media::after {
        background:
            linear-gradient(180deg, rgba(10, 14, 12, 0.35) 0%, rgba(10, 14, 12, 0.2) 55%, var(--color-background) 100%),
            linear-gradient(90deg,
                color-mix(in srgb, var(--color-background) 94%, transparent) 0%,
                color-mix(in srgb, var(--color-background) 76%, transparent) 34%,
                transparent 70%);
    }

    .home-hero-inner {
        padding-top: 28px;
        padding-bottom: 76px;            /* room for the trust strip to overlap */
    }

    .home-hero-title { font-size: clamp(2.5rem, 5.6vw, 3.25rem); line-height: 1.04; }
    .home-hero-sub { margin-top: 14px; font-size: 1.0625rem; max-width: 17em; }
    .home-hero-script { top: 8px; right: calc(var(--home-gutter) + 8px); font-size: 1.625rem; }

    .home-search { margin-top: 28px; max-width: 520px; }
    .home-search-box { height: 60px; padding: 0 8px 0 20px; }

    /* Trust strip overlaps the hero's lower edge */
    .home-trust-wrap { margin-top: -44px; }
    .home-trust { padding: 18px 8px; border-radius: 22px; }
    .home-trust-item { flex-direction: row; justify-content: center; gap: 12px; padding: 0 12px; text-align: left; }
    .home-trust-icon { width: 46px; height: 46px; }
    .home-trust-icon .material-symbols-outlined { font-size: 25px; }
    .home-trust-text { font-size: 0.875rem; }
    .home-trust-text strong { font-size: 0.9375rem; }

    /* Sections */
    .home-section { margin-top: 44px; }
    .home-section-head { margin-bottom: 20px; }
    .home-section-title { font-size: 1.625rem; }
    .home-section-head:not(.home-section-head--plain) .home-section-title::after { width: 44px; margin-top: 8px; }
    .home-section-link { font-size: 0.9375rem; }

    .home-cats { --gap: 12px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .home-cat { gap: 8px; padding: 16px 4px 12px; border-radius: 18px; }
    .home-cat-art { width: 50px; height: 50px; }
    .home-cat-label { font-size: 0.75rem; }
    .home-cat--feature { padding: 18px; border-radius: 22px; }
    .home-cat--feature .home-cat-art { width: 52%; }
    .home-cat-go { right: 16px; bottom: 16px; width: 38px; height: 38px; }

    .home-slider { margin-top: 44px; }
    .home-slider-track { border-radius: 26px; }
    .home-slide { min-height: 260px; }
    .home-slide-body { width: 56%; padding: 32px 0 44px 36px; }
    .home-slide-title { font-size: 2rem; }
    .home-slide-sub { margin-top: 10px; font-size: 1rem; }
    .home-slide-cta { height: 44px; margin-top: 20px; padding: 0 22px; font-size: 0.9375rem; }
    .home-slide-script { right: 5%; font-size: 1.75rem; }
    .home-slider-dots { bottom: 12px; }
    .home-slider-dot::before { width: 8px; height: 8px; }

    .home-rail { gap: 18px; }
    .home-place { flex-basis: 220px; border-radius: 20px; }
    .home-place-media { height: 132px; }
    .home-place-body { padding: 0 14px 16px; gap: 10px; }
    .home-place-badge { width: 46px; height: 46px; margin-top: -22px; }
    .home-place-badge .material-symbols-outlined { font-size: 24px; }
    .home-place-title { font-size: 0.9375rem; }
    .home-place-sub { font-size: 0.8125rem; }
    .home-reel { flex-basis: 160px; border-radius: 18px; }
}

/* ==========================================================================
   DESKTOP (1100px+) — single-row header, wider hero
   ========================================================================== */
@media (min-width: 1100px) {
    body.page-is-homepage {
        --hh: 80px;
    }

    .home-header-row { flex-wrap: nowrap; }

    .home-nav {
        order: 0;
        flex-basis: auto;
        margin-inline: 20px 0;
        overflow: visible;
    }

    .home-hero-img { object-position: 100% 62%; }

    .home-hero-inner {
        padding-top: 52px;
        padding-bottom: 96px;
    }

    .home-hero-title { font-size: clamp(3.25rem, 4.5vw, 4rem); }
    .home-hero-sub { font-size: 1.1875rem; }
    .home-hero-script { top: 26px; right: auto; left: 54%; font-size: 2rem; }
    .home-search { margin-top: 34px; max-width: 580px; }
    .home-search-box { height: 64px; }

    .home-trust-wrap { margin-top: -52px; }
    .home-trust { padding: 22px 12px; }

    .home-section { margin-top: 56px; }
    .home-cats { --gap: 18px; }
    .home-cat { gap: 10px; padding: 22px 8px 18px; border-radius: 20px; }
    .home-cat-art { width: 68px; height: 68px; }
    .home-cat-label { font-size: 0.875rem; }
    .home-cat--feature { padding: 24px; border-radius: 26px; }
    .home-cat-title { font-size: 2rem; }
    .home-cat-sub { font-size: 0.9375rem; }
    .home-cat-go { right: 22px; bottom: 22px; width: 44px; height: 44px; }
    .home-cat-go .material-symbols-outlined { font-size: 22px; }

    .home-slider { margin-top: 56px; }
    .home-slide { min-height: 320px; }
    .home-slide-body { width: 46%; padding: 44px 0 56px 56px; }
    .home-slide-title { font-size: 2.5rem; }
    .home-slide-sub { font-size: 1.125rem; }
    .home-slide-script { right: 7%; font-size: 2.125rem; }

    /* Cards share the row instead of scrolling when they fit */
    .home-rail--fit,
    .home-rail:has(> .home-place) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 1fr);
    }
}

@media (min-width: 1440px) {
    .home-hero-inner { padding-top: 64px; padding-bottom: 112px; }
}

/* ==========================================================================
   10. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .home-page *,
    .home-header * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .home-slider-track {
        scroll-behavior: auto;
    }

    .home-cat:hover,
    .home-place:hover,
    .home-reel:hover,
    .home-loc-pill:hover,
    .home-hbtn:hover,
    .home-slide-cta:hover {
        transform: none;
    }
}