/* ════════════════════════════════════════════════════════════════════
   TravelZona — Homepage Redesign (Patch 2 + 2.5 + 2.1 fix)
   ─────────────────────────────────────────
   Includes:
     • Editorial-photo hero with search bar (Patch 2)
     • "Explore by Category" visual grid (Patch 2.5)
     • "Featured Destinations" horizontal scroll (Patch 2.5)
     • "People to Follow" row (Patch 2.5)
     • "Final CTA" band for logged-out visitors (Patch 2.5)
     • Guest CTA in the right panel (Patch 2)
     • PATCH-2.1: Override the desktop 3-column grid template to add
       full-width "hero" and "cta" rows. The hero now spans all 3
       columns naturally (no 100vw hack) and content stays centered.
   Loaded only on / (index.php).
   ════════════════════════════════════════════════════════════════════ */

/* PATCH-2.1: Prevent horizontal scrollbar on the homepage.
   The hero and final CTA break out of the feed column to span the
   full viewport width via grid-template-areas (see desktop override
   below). This clip prevents any sub-pixel overflow from causing a
   horizontal scrollbar. */
body.home-page {
    overflow-x: hidden;
}

/* ─── Hero Section ────────────────────────────────────────────────────
   Full-bleed editorial photo with white-on-image text and a floating
   white search card.

   PATCH-2.1 FIX: On desktop (≥1024px) the homepage uses a 3-column
   grid (sidebar | feed | right panel) defined in css/pages/home.css.
   The hero is a direct child of .main-content (the grid container),
   so without a grid-area it would be auto-placed into the 260px-wide
   sidebar column — that's why it was shifted left and cramped.

   The fix: override the grid template to add a full-width "hero" row
   at the top and a full-width "cta" row at the bottom. The hero and
   final CTA each span all 3 columns naturally — no 100vw hack needed.
   ──────────────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
    width: 100%;
    min-height: 520px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-radius: 0;
}

.home-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Dark gradient overlay — bottom-up so text stays readable */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.15) 0%,
            rgba(0, 0, 0, 0.25) 45%,
            rgba(0, 0, 0, 0.70) 100%);
    z-index: 2;
    pointer-events: none;
}

.home-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 760px;
    padding: 0 1.5rem 3rem;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
}

.home-hero-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.75rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    letter-spacing: -0.01em;
}

.home-hero-subhead {
    font-size: clamp(0.9375rem, 2.5vw, 1.0625rem);
    font-weight: 400;
    line-height: 1.45;
    margin: 0 0 1.5rem 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
    opacity: 0.95;
}

/* ─── Search Card ──────────────────────────────────────────────────── */

.home-hero-search {
    background: #ffffff;
    border-radius: 9999px;
    padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    max-width: 580px;
    margin: 0 auto;
}

.home-hero-search-icon {
    color: #7c3aed; /* PATCH-2.1: explicit purple — site's --brand-500 is blue, not purple */
    font-size: 1rem;
    flex-shrink: 0;
}

.home-hero-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #1f2937;
    padding: 0.625rem 0;
    min-width: 0;
}

.home-hero-search-input::placeholder {
    color: #9ca3af;
}

.home-hero-search-btn {
    flex-shrink: 0;
    border: none;
    background: #7c3aed; /* PATCH-2.1: explicit purple — site's --brand-500 is blue, not purple */
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.home-hero-search-btn:hover {
    background: #6d28d9; /* PATCH-2.1: explicit purple hover */
}

.home-hero-search-btn:active {
    transform: translateY(1px);
}

/* ─── Quick category chips under search bar ────────────────────────── */

.home-hero-chips {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.home-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.home-hero-chip:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.home-hero-chip i {
    font-size: 0.75rem;
}

/* ─── Logged-out guest CTA banner (replaces right panel placeholder) ── */

.home-guest-cta {
    background: linear-gradient(135deg, #7c3aed, #8b5cf6); /* PATCH-2.1: explicit purple gradient */
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.20);
}

.home-guest-cta h3 {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.375rem 0;
}

.home-guest-cta p {
    font-size: 0.875rem;
    opacity: 0.92;
    margin: 0 0 1rem 0;
}

.home-guest-cta-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.home-guest-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.home-guest-cta-btn-primary {
    background: #ffffff;
    color: #6d28d9; /* PATCH-2.1: explicit purple */
}

.home-guest-cta-btn-primary:hover {
    transform: translateY(-1px);
}

.home-guest-cta-btn-secondary {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.home-guest-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* ─── Desktop: override the grid template to give hero + CTA their
       own full-width rows. ─────────────────────────────────────────
   PATCH-2.1 FIX: The original grid in home.css has 2 rows:
       "sidebar topbar right"
       "sidebar feed  right"
   We override it to 4 rows, adding a "hero" row at the top and a
   "cta" row at the bottom — both spanning all 3 columns. This makes
   the hero and final CTA naturally full-width without any 100vw hack.

   The sidebar and right panel now span rows 2-3 instead of 1-2.
   The topbar stays in row 2. The feed stays in row 3. */

@media (min-width: 1024px) {
    /* ════════════════════════════════════════════════════════════════
       S1.2 LAYOUT REDESIGN:
       - NO left sidebar (nav is in hamburger menu + header)
       - NO topbar (header.php already has search + notifications + avatar)
       - Hero: 90% width, small height (~280px)
       - Feed: ~60% on left
       - Right sidebar: ~30% on right (widgets: suggested users, etc.)
       - Everything centered at 90% viewport width
       ════════════════════════════════════════════════════════════════ */

    /* Override the grid template from home.css */
    body.home-page .main-content {
        grid-template-columns: 2fr 1fr !important;
        grid-template-rows: auto 1fr auto !important;
        grid-template-areas:
            "hero  hero"
            "feed  right"
            "cta   cta" !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding-top: 1rem !important;
        gap: 1.5rem !important;
    }

    /* Hide left sidebar completely on homepage desktop */
    body.home-page .home-sidebar {
        display: none !important;
    }

    /* Hide topbar completely — header.php provides search + notifications */
    body.home-page .home-topbar {
        display: none !important;
    }

    /* Hero: smaller height, rounded corners, 90% width (inherits from grid) */
    body.home-page .home-hero {
        grid-area: hero;
        min-height: 280px !important;
        max-height: 50vh !important;
        border-radius: 1rem !important;
        margin: 0 !important;
        overflow: hidden;
    }

    /* Shift feed to row 2, left column */
    body.home-page .home-feed-wrapper {
        grid-area: feed;
        padding-top: 0 !important;
        padding-bottom: 2rem !important;
        max-width: 100% !important;
    }

    /* Right panel: row 2, right column — widgets go here */
    body.home-page .home-right-panel {
        display: flex !important;
        grid-area: right;
        width: 100% !important;
        height: auto !important;
        position: sticky !important;
        top: 70px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 0 0.5rem !important;
        border-left: 1px solid var(--border, #e4e4e7);
    }

    /* Assign the final CTA to its full-width row at the bottom */
    body.home-page .home-final-cta {
        grid-area: cta;
    }

    /* Hero content: tighter padding for smaller hero */
    .home-hero-content {
        max-width: 700px;
        padding: 0 1.5rem 2rem !important;
    }

    /* Hero headline smaller */
    .home-hero-headline {
        font-size: 1.75rem !important;
    }

    /* Hero subhead smaller */
    .home-hero-subhead {
        font-size: 0.9375rem !important;
    }
}

/* ─── Mobile: compact hero + adjust feed spacing ───────────────────── */

/* On mobile/tablet (≤1023px) the desktop grid is disabled — the hero
   is a normal block element that naturally takes 100% width. The fixed
   header (~56px) floats on top of the hero image, which is the desired
   magazine effect. Hero content is at the bottom, well below the header.

   We also reduce the feed wrapper's top padding from 56px to 1rem,
   because the hero already occupies the top of the page — the 56px
   clearance for the header is no longer needed. */
@media (max-width: 1023px) {
    body.home-page .home-hero {
        margin-top: 0;
        margin-bottom: 0;
    }

    body.home-page .home-feed-wrapper {
        padding-top: 1rem !important;
    }
}

@media (max-width: 640px) {
    .home-hero {
        min-height: 460px;
    }

    .home-hero-content {
        padding: 0 1rem 2rem;
    }

    .home-hero-search {
        padding: 0.375rem 0.375rem 0.375rem 1rem;
    }

    .home-hero-search-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .home-hero-search-btn .btn-label {
        display: none;
    }
}

/* ─── Reduced motion preference ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .home-hero-chip,
    .home-hero-search-btn,
    .home-guest-cta-btn {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 2.5 — Explore by Category visual grid
   6 large tiles, each with a real listing photo from that category.
   ════════════════════════════════════════════════════════════════════ */

.home-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.home-cat-tile {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-cat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.home-cat-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.home-cat-tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 2;
    pointer-events: none;
}

.home-cat-tile-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.625rem 0.75rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.home-cat-tile-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.home-cat-tile-count {
    font-size: 0.6875rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Fallback tile (when no listing image is available) */
.home-cat-tile-fallback {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 640px) {
    .home-cat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .home-cat-tile {
        aspect-ratio: 1 / 1;
    }
    .home-cat-tile-label {
        font-size: 0.8125rem;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 2.5 — Featured Destinations horizontal scroll
   Reuses .shorts-carousel container for layout consistency.
   ════════════════════════════════════════════════════════════════════ */

.home-dest-card {
    display: block;
    text-decoration: none;
    color: inherit;
    min-width: 220px;
    max-width: 220px;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-dest-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.home-dest-card-image {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--muted);
}

.home-dest-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.home-dest-card:hover .home-dest-card-image img {
    transform: scale(1.05);
}

.home-dest-card-info {
    padding: 0.625rem 0.75rem;
}

.home-dest-card-name {
    font-size: 0.875rem;
    font-weight: 700;
    margin: 0 0 0.125rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-dest-card-meta {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 2.5 — People to Follow row
   ════════════════════════════════════════════════════════════════════ */

.home-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

.home-person-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--foreground);
    box-shadow: var(--shadow-sm);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-person-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.home-person-avatar {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #ede9fe; /* PATCH-2.1: explicit light purple */
}

.home-person-avatar-fallback {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(135deg, #8b5cf6, #ec4899); /* PATCH-2.1: explicit purple-pink gradient */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.home-person-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.home-person-name {
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-person-role {
    font-size: 0.6875rem;
    color: #7c3aed; /* PATCH-2.1: explicit purple */
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.home-person-loc {
    font-size: 0.6875rem;
    color: var(--muted-foreground);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 2.5 — Final CTA band (logged-out visitors only)
   Full-width band at the bottom of the page above the footer.
   ════════════════════════════════════════════════════════════════════ */

.home-final-cta {
    position: relative;
    /* PATCH-2.1: On desktop this is a grid item with grid-area: cta,
       spanning all 3 columns — no 100vw breakout needed. On mobile
       there is no grid, so width: 100% is the default. */
    width: 100%;
    margin: 2rem 0 0;
    padding: 4rem 2rem;
    border-radius: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 50%, #0ea5e9 100%);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 12px 40px rgba(79, 70, 229, 0.25);
}

/* Subtle world-map dot pattern overlay */
.home-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 18px 18px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 1;
}

.home-final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
}

.home-final-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    margin: 0 0 0.625rem 0;
    line-height: 1.15;
}

.home-final-cta p {
    font-size: clamp(0.9375rem, 2vw, 1.0625rem);
    margin: 0 0 1.75rem 0;
    opacity: 0.95;
}

.home-final-cta-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.home-final-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, background-color 0.18s ease;
    font-family: inherit;
}

.home-final-cta-btn-primary {
    background: #ffffff;
    color: #4f46e5;
}

.home-final-cta-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.home-final-cta-btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.home-final-cta-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .home-final-cta {
        padding: 2.5rem 1.25rem;
        margin-top: 1.5rem;
        margin-bottom: 0;
    }
    .home-final-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .home-final-cta-btn {
        justify-content: center;
    }
}

/* ════════════════════════════════════════════════════════════════════
   PATCH 2.5 — Section header (shared by all new sections)
   Reuses .home-section-header from existing CSS, but adds an
   optional .home-section-subtitle for context lines.
   ════════════════════════════════════════════════════════════════════ */

.home-section-subtitle {
    font-size: 0.8125rem;
    color: var(--muted-foreground);
    margin: 0 0 0.75rem 0;
    font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════════
   S1.2 LAYOUT OVERRIDE — Larger desktops (≥1280px and ≥1440px)
   Override the 3-column grid from home.css with the new 2-column layout.
   Keep the same 2fr 1fr ratio, just allow slightly wider content.
   ════════════════════════════════════════════════════════════════════ */

@media (min-width: 1280px) {
    body.home-page .main-content {
        grid-template-columns: 2fr 1fr !important;
        max-width: 1200px !important;
    }
    .home-feed-wrapper {
        max-width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width: 1440px) {
    body.home-page .main-content {
        grid-template-columns: 2fr 1fr !important;
        max-width: 1400px !important;
    }
    .home-right-panel {
        width: 100% !important;
    }
}