/* homepage-tablet.css
   Tablet-specific overrides tuned for 1114x705 (landscape) viewport.
   This file contains only adjustments to font-sizes, spacing, and container
   positions so nothing is hidden; it overrides `homepage.css` where needed.
*/

/* Base assumption: include after homepage.css to apply overrides */

@media (min-width: 1000px) and (max-width: 1200px) and (orientation: landscape) {

    /* Prevent accidental horizontal overflow while keeping content visible */
    html, body { -webkit-text-size-adjust: 100%; }

    /* Reduce global text for tablet to avoid overflow and clipping */
    body {
        font-size: 14px; /* slightly smaller base for 1114x705 */
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
    }

    /* Add horizontal padding for centered containers but keep full-width fluid containers intact */
    .container {
        max-width: 960px;
        padding-left: 28px;
        padding-right: 28px;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    /* Ensure fluid containers remain full-bleed so hero can span the viewport */
    .container-fluid {
        padding-left: 0;
        padding-right: 0;
        max-width: none;
    }

    /* Header/logo adjustments */
    .site-header .brand img { height: 68px; }
    .site-header .brand .sublogo { height: 38px; }
    .header-badge { font-size: 0.74rem; padding: 4px 9px; }

    /* Navbar spacing */
    .navbar { padding-top: 0.35rem; padding-bottom: 0.35rem; }
    .size_logo img { height: 88px; }

    /* Large banner: reduce font and padding to avoid pushing other content */
    .large-banner {
        padding: 18px 20px;
        border-radius: 14px;
        font-size: 1rem;
    }
    .large-banner .lead-text { padding: 10px 14px; font-size: 0.98rem; }
    .large-banner .sticker { width: 50px; height: 50px; left: 14px; top: 14px; }

    /* Hero banner: tighter max-height so it doesn't push content off-screen */
    .hero-banner { max-height: 320px; }
    /* Make the carousel container full-bleed across the viewport */
    .hero-carousel {
        position: relative;
        left: 50%;
        transform: translateX(-50%); /* center the 100vw element reliably */
        width: 100vw;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden; /* contain any overflow and prevent right-gap */
        max-width: 100vw;
    }
    /* Make inner carousel match its container exactly to avoid rounding gaps */
    .hero-carousel .carousel-inner {
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
    .hero-carousel .carousel-item { width: 100%; }
    .hero-carousel .carousel-item img {
        width: 100%;
        max-width: none; /* prevent browser from constraining by intrinsic sizes */
        /* Use viewport-relative height to adapt to tablet while avoiding excessive tall banners */
        height: 36vh;
        min-height: 260px;
        object-fit: cover;
        object-position: center center;
        display: block;
    }
    /* Prevent any horizontal scroll caused by the carousel on tablet */
    html, body { overflow-x: hidden; }

    /* Flip-cards: reduce max-height so cards don't overflow vertically */
    .flip-card .flip-card-inner { aspect-ratio: 16/9; max-height: 260px; }
    .flip-card img { border-radius: 6px; }
    /* Reduce flip-card back typography and padding for tablet to avoid overflow */
    .flip-card-back .card {
        padding: 0.5rem; /* slightly reduce internal padding */
        box-sizing: border-box;
    }
    .flip-card-back .card h5 { font-size: 0.80rem; margin-bottom: 0.15rem; }
    .flip-card-back .card p { font-size: 0.75rem; line-height: 1.28; margin: 0; }

    /* Card body overlay adjusted for tablet so it doesn't overlap or get clipped */
    .card-body-bottom {
        position: absolute; /* ensure overlay is positioned over the image */
        left: 12px;
        right: 12px;
        bottom: 50px; /* anchored close to the card bottom on tablet */
        padding: 0.6rem 0.8rem;
        border-radius: 10px;
        z-index: 12; /* ensure it sits above image and siblings */
    }
    .card-body-bottom h5 { font-size: 0.92rem; }
    .card-body-bottom p { font-size: 0.78rem; word-break: break-word; }

    /* Intro-full adjustments (panel under slideshow) */
    .intro-full { padding: 14px 18px; border-radius: 12px; }
    .intro-full h3, .intro-full .intro-title { font-size: 0.95rem; }
    .intro-full p, .intro-full .intro-text { font-size: 0.95rem; word-break: break-word; }

    /* Footer tweaks */
    footer { padding-top: 1.25rem; padding-bottom: 1.25rem; }
    .footer-icon { width: 44px; height: 44px; }

    /* Modal/login sizing on tablet */
    .modal-dialog { max-width: 520px; }
    .modal-content.login-modal { max-width: 520px; }

    /* Keep header-decor non-intrusive (do not hide important elements) */
    .header-decor { height: 52px; bottom: -18px; display: block !important; }
    .header-decor .shape { opacity: 0.9; }
    .header-decor .shape.circle { width: 60px; height: 60px; left: 6%; bottom: -20px; }
    .header-decor .shape.star { width: 44px; height: 44px; left: 28%; bottom: -14px; }
    .header-decor .shape.blob { width: 68px; height: 68px; right: 6%; bottom: -26px; }

    /* Slightly reduce hover transform so overlays stay inside the viewport */
    .flip-card:hover .card-body-bottom,
    .flip-card:focus .card-body-bottom,
    .flip-card.is-flipped .card-body-bottom {
        transform: translateY(-4px) scale(1.0);
    }

    /* Ensure high-contrast elements remain legible */
    .intro-box, .card { background-color: rgba(255,255,255,0.95); }

    /* Adjust some utility sizes */
    .icon-circle { width: 52px; height: 52px; }
    .placeholder-box { height: 140px; }

    /* Tighter typography scale to avoid clipping */
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1rem; }
    p { font-size: 0.95rem; }

}

/* End of homepage-tablet.css */