/**
 * K12 Homepage - School Browse Carousel
 * LoveForm-style horizontal scrolling card layout
 * 7 columns per row with nav buttons
 */

/* ==========================================
   SCHOOL BROWSE SECTION
   ========================================== */

.school-browse-section {
    background: #fff;
    padding: 0 !important; /* Override Bootstrap py-5 - START FROM ZERO */
    /* Background extends full width - no max-width on section itself */
    width: 100%;
    /* BUG-091 FIX: Establish lower stacking context than hero section (z-index: 100) */
    /* This ensures heart icons (z-index: 2) stay below modal/autocomplete overlay */
    position: relative;
    z-index: 1;
}

/* Remove Bootstrap's container gutters so our padding values are the single source of truth. */
.school-browse-section > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* School Row Container - Consistent spacing (LoveForm pattern)
   BUG-011 FIX: Removed negative margins that caused row overlap on resize.
   SPACING FIX: Use ONLY margin-top for inter-row spacing (not both top+bottom)
   This prevents double-spacing between middle rows.
   RESPONSIVE MARGINS: All viewports use minimal/no negative margin to prevent overlap */
.school-row {
    margin-bottom: 0; /* ZERO - all spacing handled by margin-top */
    margin-top: 8px; /* Large desktop (≥1600px): small positive gap between rows */
    position: relative;
    /* Content constrained but background full-width via parent */
    max-width: 1760px;
    margin-left: auto;
    margin-right: auto;
}

/* First row: no top margin (nothing above it) */
.school-row:first-child {
    margin-top: 0;
}

/* Row Header (Left Corner) - LoveForm style: title + nav on same line */
.row-header {
    padding-top: 0; /* ZERO - spacing handled by row margin-top */
    margin-bottom: 4px; /* Minimal spacing between title and cards */
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
}

.school-row:first-child .row-header {
    padding-top: 32px; /* Only first row needs top padding (space from hero) */
}

/* When the landing "Continue searching..." row is visible, reduce the first row offset
   so the carousel header aligns closer to Airbnb's spacing. */
.k12-landing-page:has(#k12ContinueSection:not([hidden])) .school-row:first-child .row-header {
    padding-top: 16px;
}

.k12-landing-page:has(#k12ContinueSection:not([hidden])) .school-row:first-child .row-nav {
    top: 18px;
}

.row-header h3 {
    font-size: 18px; /* Match LoveForm's compact header size */
    font-weight: 700;
    color: #222;
    margin: 0;
    padding: 0;
    line-height: 1; /* Remove line-height spacing */
    letter-spacing: -0.3px;
    display: inline-block; /* Allow nav buttons to sit on same line */
}

/* Airbnb-style forward arrow (desktop only): links section header to /k12/s results */
.row-forward-link {
    display: none;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border-radius: 50%;
    border: none;
    background: #e5e7eb; /* Match default review avatar background */
    text-decoration: none;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    transition: transform 0.2s ease, background 0.2s ease;
}

@media (min-width: 992px) {
    .row-forward-link {
        display: inline-flex;
    }
}

.row-forward-link:hover {
    transform: scale(1.05);
    background: #d1d5db;
}

.row-forward-link img {
    width: 12px;
    height: 12px;
    display: block;
}

.row-subtitle {
    display: none; /* Hide all subtitles by default (LoveForm pattern) */
    font-size: 14px;
    color: #717171;
    margin: 2px 0 0 0; /* Small 2px top gap from h3, zero elsewhere */
    padding: 0;
    font-weight: 400;
    line-height: 1.2; /* Controlled line-height prevents excessive vertical space */
}

/* Show subtitle ONLY for Featured Schools row (second row) - matches LoveForm pattern */
.school-browse-section .school-row:nth-child(2) .row-subtitle {
    display: block;
}

/* Cards Container with Horizontal Scroll */
.cards-container {
    position: relative;
    overflow: hidden;
    padding: 0 24px;
    margin: 0; /* ZERO margin */
}

.school-cards-grid {
    display: flex;
    gap: 12px; /* LoveForm standard for horizontal carousels */
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 0; /* ZERO spacing - starting from absolute zero */
}

.school-cards-grid::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* School Card - LoveForm pattern: MAXIMUM 7 visible cards
   - Cards scale down on smaller viewports (responsive)
   - Cards NEVER allow more than 7 visible (min-width enforced)
   - At 1760px max-width container: (1760 - 48px padding - 72px gaps) / 7 = ~234px per card
*/
.school-card-placeholder {
    flex: 0 0 calc((100% - (6 * 12px)) / 7); /* Target 7 columns with 12px gaps */
    min-width: 220px; /* GUARD: Ensures max 7 cards visible (1760-48-72)/7 ≈ 234px */
    max-width: none; /* Allow cards to grow larger on big screens */
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 4px 0; /* Reduced from 12px - fixed card-body height handles spacing */
    padding: 0;
}

/* Card Image - Borderless LoveForm-style with shadow */
.card-image {
    position: relative;
    width: 100%;
    padding-top: 85%; /* Taller cards - increased from 75% (4:3) to 85% */
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Subtle shadow instead of border */
    transition: all 0.2s ease;
    margin-bottom: 8px; /* More spacing between image and school name */
}

.school-card-placeholder:hover .card-image {
    box-shadow: 0 6px 16px rgba(40, 154, 150, 0.12); /* LoveForm teal-tinted shadow */
    transform: translateY(-2px); /* Subtle lift effect */
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge - Top Left (Parent Favorite) - LoveForm Branding */
.card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #289a96, #34b4a7); /* LoveForm teal gradient */
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(40, 154, 150, 0.25); /* Teal-tinted shadow */
    z-index: 2;
    white-space: nowrap; /* Default: single line on desktop */
}

/* Mobile: Stack "Parents'" and "favorite" on two lines for better fit */
@media (max-width: 640px) {
    .card-badge {
        white-space: normal; /* Allow line break */
        max-width: 70px; /* Force wrap after "Parents'" */
        text-align: center;
        line-height: 1.2;
        padding: 4px 8px;
    }
}

/* Heart Icon - Top Right (Favorite Button) */
.card-heart {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-heart:hover {
    transform: scale(1.1);
    background: #fff;
}

.card-heart svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #222;
    stroke-width: 2;
}

.card-heart.favorited svg {
    fill: #289a96; /* LoveForm teal, not LoveForm pink */
    stroke: #289a96;
}

/* Wishlist heart styling is intentionally different across surfaces:
   - Landing (`/k12`) + Search grid (`/k12/s`): Airbnb plain heart (no circle)
   - Map marker cards + Listing (`/k12/<id>`): circular heart button
   Keep these distinct; do NOT normalize globally. */
.k12-landing-page .loveform-listing-card__heart {
    background: transparent !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    top: 10px !important;
    right: 10px !important;
    display: block !important;
    padding: 0 !important;
    backdrop-filter: none !important;
}

.k12-landing-page .loveform-listing-card__heart svg {
    width: 24px !important;
    height: 24px !important;
    fill: rgba(0, 0, 0, 0.5) !important;
    stroke: white !important;
    stroke-width: 2px !important;
    transition: transform 0.2s ease !important;
}

.k12-landing-page .loveform-listing-card__heart:hover svg {
    transform: scale(1.1) !important;
}

.k12-landing-page .loveform-listing-card__heart.is-favorited svg,
.k12-landing-page .loveform-listing-card__heart.favorited svg {
    fill: #FF385C !important;
    stroke: #FF385C !important;
}

/* Card Body - Outside the bordered card
   BUG-011 FIX: Fixed height ensures consistent card sizing regardless of text length.
   This prevents row overlap when resizing - the LoveForm pattern. */
.card-body {
    padding: 0;
    margin: 0;
    height: 52px; /* Fixed height: 2 lines name (~32px) + meta (~16px) + spacing */
    overflow: hidden; /* Clip any overflow */
}

/* Skeleton loading cards (Airbnb-style shimmer) */
.school-card-skeleton {
    pointer-events: none;
}

.school-card-skeleton .card-image {
    background: var(--app-shell-skeleton-base);
    box-shadow: none;
}

.school-card-skeleton .school-card-skeleton__title {
    height: 14px;
    width: 75%;
    margin: 2px 0 10px;
}

.school-card-skeleton .school-card-skeleton__meta {
    display: flex;
    gap: 8px;
    align-items: center;
}

.school-card-skeleton .school-card-skeleton__price {
    height: 12px;
    width: 52%;
}

.school-card-skeleton .school-card-skeleton__rating {
    height: 12px;
    width: 26%;
}

.school-row--idle .row-nav {
    display: none;
}

.school-row--idle .school-cards-grid {
    min-height: 224px;
}

.school-name {
    font-size: 13px; /* Even smaller to match LoveForm */
    font-weight: 400;
    color: #222;
    margin: 0 0 4px 0; /* LoveForm spacing between name and price */
    padding: 0;
    line-height: 1.2; /* LoveForm line-height for better text spacing */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.school-name:hover {
    color: #289a96; /* LoveForm teal on hover */
    cursor: pointer;
}

/* Long school names (> 35 chars after abbreviation)
   Apply smaller font to prevent layout distortion */
.school-name.long-name {
    font-size: 11px; /* Reduced from 13px for very long names */
    line-height: 1.15; /* Tighter line height for compact display */
}

/* Hide location and type - LoveForm minimalist design */
.school-location,
.school-type {
    display: none;
}

/* Price and rating row - LoveForm style */
.school-meta {
    display: flex;
    align-items: center;
    gap: 4px; /* Small gap between price and rating */
    font-size: 12px; /* Even smaller to match LoveForm */
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.school-meta .price {
    font-weight: 400;
    color: #6c757d; /* LoveForm light gray */
}

.school-meta .rating {
    display: flex;
    align-items: center;
    gap: 2px;
    color: #6c757d; /* LoveForm light gray */
    font-weight: 400;
}

.school-meta .rating .star {
    color: #222; /* Black star */
    font-size: 12px;
}

/* Row Navigation Buttons (Right Corner) - LoveForm style: same line as title
   Positioned within .school-row to align with .row-header h3
   Uses same padding values as .row-header for consistent alignment */
.row-nav {
    position: absolute;
    top: 0; /* Aligns with row-header padding-top: 0 */
    right: 24px; /* Match row-header padding-right */
    display: flex;
    gap: 8px;
    align-items: center;
    height: 18px; /* Match h3 line-height */
}

/* First row nav: account for first row's extra header padding */
.school-row:first-child .row-nav {
    top: 32px; /* Match .school-row:first-child .row-header padding-top */
}

.nav-btn {
    width: 28px; /* Slightly smaller to match LoveForm */
    height: 28px;
    border-radius: 50%;
    border: 1px solid #222;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #222;
    font-size: 11px; /* Slightly smaller icon */
}

.nav-btn:hover {
    background: #f7f7f7;
    transform: scale(1.05);
}

.nav-btn:active {
    transform: scale(0.95);
}

.nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    border-color: #999;
}

/* ==========================================
   RESPONSIVE DESIGN
   - On large screens: min-width: 220px ensures MAX 7 cards
   - On smaller screens: min-width reduces to allow proper column counts
   ========================================== */

/* Large Desktop (7 columns max) - default above uses min-width: 220px guard */

/* Desktop (6 columns) - reduce min-width to allow 6 cards */
@media (max-width: 1600px) {
    .school-card-placeholder {
        flex-basis: calc((100% - (5 * 12px)) / 6);
        min-width: 180px;
    }
    .school-row:not(:first-child) {
        margin-top: 8px; /* Desktop: small positive gap */
    }
}

/* Tablet (5 columns) */
@media (max-width: 1200px) {
    .school-card-placeholder {
        flex-basis: calc((100% - (4 * 12px)) / 5);
        min-width: 160px;
    }
    .school-row:not(:first-child) {
        margin-top: 8px; /* Tablet: small positive gap */
    }
}

/* Smaller Tablet (4 columns) */
@media (max-width: 992px) {
    .school-card-placeholder {
        flex-basis: calc((100% - (3 * 12px)) / 4);
        min-width: 140px;
    }
    .school-row:not(:first-child) {
        margin-top: 8px; /* Small tablet: small positive gap */
    }
}

/* Large Mobile (3 columns) - includes iPad Mini 768px */
@media (max-width: 768px) {
    .school-card-placeholder {
        flex-basis: calc((100% - (2 * 12px)) / 3);
        min-width: 120px;
    }
    .school-row:not(:first-child) {
        margin-top: 8px; /* Large mobile/iPad Mini: small positive gap */
    }

    /* Align all mobile gutters with the hero search + continue card. */
    .row-header {
        padding-left: 22px;
        padding-right: 22px;
    }

    .cards-container {
        padding: 0 22px;
    }

    .row-nav {
        right: 22px;
    }

    .row-header h3 {
        font-size: 20px;
    }

    .school-row--idle .school-cards-grid {
        min-height: 188px;
    }
}

/* Mobile (Airbnb-style: 2 columns visible - touch scroll) */
@media (max-width: 640px) {
    .school-card-placeholder {
        flex-basis: calc((100% - 12px) / 2);
        min-width: 180px;
    }
    .school-row:not(:first-child) {
        margin-top: 8px; /* Mobile: small positive gap */
    }

    .cards-container,
    .row-header {
        padding: 0 22px;
    }

    /* Mobile: show Airbnb-style forward button on section headers */
    .row-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0 12px;
    }

    .row-forward-link {
        display: inline-flex;
        margin-left: 0;
    }

    .row-subtitle {
        flex-basis: 100%;
    }

    .row-nav {
        display: none; /* Hide nav buttons on mobile, rely on touch scroll */
    }

    /* Image ratio closer to Airbnb mobile cards (more square) */
    .card-image {
        padding-top: 100%;
        border-radius: 14px;
    }

    /* Wishlist icon: Airbnb-like overlay */
    .card-heart {
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.85);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .card-heart svg {
        stroke: #ffffff;
    }

    .school-row--idle .school-cards-grid {
        min-height: 164px;
    }
}

/* ==========================================
   LAST ROW SPACING
   Last row gets bottom margin for space before footer/next section
   ========================================== */
.school-row:last-child {
    margin-bottom: 24px; /* Space before next section - ensures clean separation from inspiration-section */
}

/* ==========================================
   CARD MINIMUM HEIGHT
   Ensures cards have predictable dimensions
   ========================================== */
.school-card-placeholder {
    min-height: 260px; /* Reduced from 280px - fixed card-body handles text area */
}