/* Page-specific CSS for Best CBSE Schools in Thrissur, Kerala | Mageet School Thrissur. Shared design tokens/utilities live in layout.css. */
.page-home-index {
    min-height: 0;
}

.home-hero {
    background: #0a2519;
}

/* Hero overlay group: badge, heading, description, buttons, stats and the two readability
   gradients. Visible for the first 5s after load (see index.js), then fades out over 0.8s so the
   video is fully visible, and returns to visible on every fresh page load/refresh. The video
   layer itself is a sibling, outside this element, so it is never affected. */
.hero-overlay-content {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.hero-overlay-content.hero-content-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Content overlay (badge, heading, buttons, stats) is centered on top of the video/image layer.
   It is absolutely positioned on desktop/laptop (see below) so it never forces the hero taller
   than the video's own aspect ratio. */
.home-hero-content {
    display: flex;
    align-items: center;
    z-index: 10;
}

/* Milestones timeline image: scales down to fit its column on desktop/laptop/tablet, but is
   never shrunk below a legible width - on narrow screens it scrolls horizontally within its own
   container instead of squeezing the many small year labels/numbers into an unreadable size. */
.home-milestones-scroll {
    width: 100%;
    overflow-x: auto;
}

.home-milestones-img {
    display: block;
    height: auto;
    width: 100%;
    min-width: 900px;
    object-fit: contain;
}

/* "What Makes Us Different" (points 01-07): number circle, title and description sized for
   readability. The section is allowed to grow taller to fit the larger text (no fixed height). */
.uniqueness-number {
    font-size: 18px;
    font-weight: 600;
}

.uniqueness-item-title {
    font-size: 18px;
    line-height: 1.4;
}

.uniqueness-item-desc {
    font-size: 17px;
    line-height: 1.6;
}

.activity-showcase-slider {
    outline: none;
    touch-action: pan-y;
}

.activity-showcase-slide {
    pointer-events: none;
}

.activity-showcase-control,
.activity-showcase-indicators {
    z-index: 20;
}

.activity-showcase-control,
.activity-showcase-dot {
    pointer-events: auto;
}

.activity-showcase-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.45);
}

.home-hero-video {
    background: #0a2519;
    contain: paint;
    overflow: hidden;
}

/* Fills the hero's absolute-positioned frame at 100%/100% with no oversizing or zoom transform.
   YouTube's embedded player letterboxes/pillarboxes internally to keep the video's 16:9 frame
   intact, so the full picture (including heads and on-screen text) stays visible instead of
   being cropped. */
.home-hero-video__frame {
    border: 0;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* Desktop/laptop: the hero's height is derived purely from the video's own 16:9 ratio, not a
   fixed pixel value. A fixed height made the section wider-than-16:9 at typical screen widths,
   which forced YouTube's player to pillarbox (dark bars) left and right to avoid cropping. Making
   the box itself 16:9 means the video fills it exactly, edge to edge, with no bars and no crop. */
@media (min-width: 768px) {
    .home-hero {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .home-hero-content {
        position: absolute;
        inset: 0;
    }

    /* Tightened from Tailwind's mt-14 (3.5rem) so the stats row always fits inside the video's
       16:9-derived height at narrower laptop widths, instead of being clipped by .home-hero's
       overflow: hidden. */
    .home-hero-stats {
        margin-top: 1.25rem;
        padding-top: 1.5rem;
    }
}

@media (max-width: 767px) {
    .page-home-index {
        min-height: 0;
    }

    .home-hero {
        min-height: 580px;
    }

    .home-hero-content {
        position: relative;
        width: 100%;
    }

    .home-hero-video {
        display: none;
    }
}

/* Section labels above the Home page headings (What Drives Us, Why MAGEET, Our Leaders, Our Journey,
   Our Uniqueness, Activities, Gallery, About Us, FAQ). Replaces Tailwind's text-sm (14px / 20px):
   about 15.2px on phones growing to 16px from roughly 1000px wide, i.e. 9-14% larger, with the same
   20px line box so the spacing below each label is unchanged. */
.home-section-eyebrow {
    font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1rem);
    line-height: 1.25rem;
}
/* Instagram feed (Views/Shared/Components/InstagramFeed): six square thumbnails - 2 columns on phones,
   3 on tablets, 6 on desktop. Thumbnails are saved on this server, so nothing loads from Instagram. */
.home-instagram-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .home-instagram-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .home-instagram-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.home-instagram-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #f3efe6;
    box-shadow: 0 4px 14px rgba(13, 48, 35, 0.08);
}

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

.home-instagram-card:hover img,
.home-instagram-card:focus-visible img {
    transform: scale(1.06);
}

.home-instagram-card:focus-visible {
    outline: 3px solid #cc9600;
    outline-offset: 2px;
}

.home-instagram-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 48, 35, 0.45);
    color: #fff;
    font-size: 1.75rem;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.home-instagram-card:hover .home-instagram-overlay,
.home-instagram-card:focus-visible .home-instagram-overlay {
    opacity: 1;
}

.home-instagram-play {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.25rem;
}