/*
 * KPT Production — Layout System
 * Container, grid, section spacing. Mobile-first.
 */

/* ── SITE WRAPPER ─────────────────────────────────────────── */
#kpt-site {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
#kpt-content { flex: 1; }

/* ── CONTAINER ────────────────────────────────────────────── */
.kpt-container {
    width: 100%;
    max-width: var(--kpt-container-lg);
    margin-inline: auto;
    padding-inline: var(--kpt-container-pad);
}
.kpt-container--sm  { max-width: var(--kpt-container-sm); }
.kpt-container--md  { max-width: var(--kpt-container-md); }
.kpt-container--xl  { max-width: var(--kpt-container-xl); }
.kpt-container--full { max-width: 100%; }

/* ── SECTION SPACING ──────────────────────────────────────── */
.kpt-section {
    padding-block: clamp(var(--kpt-space-xl), 6vw, var(--kpt-space-3xl));
}
.kpt-section--sm {
    padding-block: clamp(var(--kpt-space-lg), 3vw, var(--kpt-space-xl));
}
.kpt-section--lg {
    padding-block: clamp(var(--kpt-space-2xl), 8vw, 96px);
}

/* ── SECTION HEADERS ──────────────────────────────────────── */
.kpt-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kpt-space-md);
    margin-bottom: var(--kpt-space-lg);
    flex-wrap: wrap;
}
.kpt-section-head__title {
    font-size: var(--kpt-text-xl);
    font-weight: var(--kpt-weight-bold);
    position: relative;
    padding-left: var(--kpt-space-md);
}
.kpt-section-head__title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--kpt-gold-gradient);
    border-radius: var(--kpt-radius-full);
}
.kpt-section-head__link {
    font-size: var(--kpt-text-sm);
    color: var(--kpt-gold);
    font-weight: var(--kpt-weight-medium);
    white-space: nowrap;
}
.kpt-section-head__link:hover { color: var(--kpt-gold-light); }

/* ── VIDEO GRID ───────────────────────────────────────────── */
/* Default: 1 col mobile, 2 col tablet, 3-4 col desktop */
.kpt-video-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kpt-space-md);
}
@media (min-width: 480px) {
    .kpt-video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .kpt-video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
    .kpt-video-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── SHORTS GRID (vertical 9:16 cards) ───────────────────── */
.kpt-shorts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kpt-space-sm);
}
@media (min-width: 480px) {
    .kpt-shorts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
    .kpt-shorts-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
    .kpt-shorts-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── NEWS GRID ────────────────────────────────────────────── */
.kpt-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kpt-space-md);
}
@media (min-width: 640px) {
    .kpt-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .kpt-news-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── TEAM GRID ────────────────────────────────────────────── */
.kpt-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kpt-space-md);
}
@media (min-width: 640px) {
    .kpt-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
    .kpt-team-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── SERVICES GRID ────────────────────────────────────────── */
.kpt-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kpt-space-md);
}
@media (min-width: 640px) {
    .kpt-services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
    .kpt-services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── DIVIDER ──────────────────────────────────────────────── */
.kpt-divider {
    border: none;
    border-top: 1px solid var(--kpt-border-subtle);
    margin-block: var(--kpt-space-lg);
}

/* ============================================================
   HERO SECTION (homepage)
   Video-first hierarchy: hero is compact, not a huge empty banner.
   ============================================================ */
.kpt-hero {
    position: relative;
    padding-block: clamp(var(--kpt-space-2xl), 10vw, 88px) clamp(var(--kpt-space-xl), 6vw, var(--kpt-space-2xl));
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74,47,170,0.18) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 100% 100%, rgba(201,168,76,0.08) 0%, transparent 60%),
        var(--kpt-bg-primary);
    border-bottom: 1px solid var(--kpt-border-subtle);
    overflow: hidden;
}
.kpt-hero__content { max-width: 640px; }
.kpt-hero .kpt-display {
    margin-top: var(--kpt-space-xs);
    margin-bottom: var(--kpt-space-sm);
}
.kpt-hero__tagline {
    font-size: var(--kpt-text-md);
    color: var(--kpt-text-secondary);
    line-height: var(--kpt-leading-relaxed);
    margin-bottom: var(--kpt-space-lg);
    max-width: 52ch;
}
.kpt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpt-space-sm);
}

/* Compact variant: used on the video-first homepage — no giant banner
   pushing content below the fold (spec §16-17). */
.kpt-hero--compact {
    padding-block: clamp(var(--kpt-space-lg), 5vw, var(--kpt-space-xl)) clamp(var(--kpt-space-md), 3vw, var(--kpt-space-lg));
}
.kpt-hero--compact .kpt-display {
    font-size: clamp(22px, 5vw, 34px);
    margin-top: 4px;
    margin-bottom: 6px;
}
.kpt-hero--compact .kpt-hero__tagline {
    font-size: var(--kpt-text-sm);
    margin-bottom: 0;
}

/* ============================================================
   PREMIUM HERO — premium dark/luxury first-impression (Fix #1)
   ============================================================ */
.kpt-hero--premium {
    position: relative;
    padding-block: clamp(64px, 12vw, 140px) clamp(56px, 10vw, 120px);
    background: var(--kpt-bg-primary);
    overflow: hidden;
    border-bottom: 1px solid var(--kpt-border-subtle);
    isolation: isolate;
}
.kpt-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.kpt-hero__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    animation: kpt-glow-drift 18s ease-in-out infinite alternate;
}
.kpt-hero__glow--purple {
    width: 480px; height: 480px;
    background: radial-gradient(circle, var(--kpt-purple-mid) 0%, transparent 70%);
    top: -120px; left: -120px;
}
.kpt-hero__glow--gold {
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--kpt-gold-dim) 0%, transparent 70%);
    bottom: -100px; right: -80px;
    animation-delay: -9s;
}
@keyframes kpt-glow-drift {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
    .kpt-hero__glow { animation: none; }
}
.kpt-hero__content {
    position: relative;
    max-width: 720px;
    z-index: 1;
}
.kpt-hero__eyebrow {
    display: inline-block;
    font-size: var(--kpt-text-xs);
    font-weight: var(--kpt-weight-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kpt-gold);
    padding: 6px 14px;
    border: 1px solid var(--kpt-border-gold);
    border-radius: var(--kpt-radius-full);
    background: rgba(201,168,76,0.08);
    margin-bottom: var(--kpt-space-md);
}
.kpt-hero__title {
    font-family: var(--kpt-font-display);
    font-size: clamp(34px, 8vw, 64px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #f0f0f5 0%, #c9a84c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--kpt-space-md);
}
.kpt-hero__tagline {
    font-size: clamp(15px, 3vw, 18px);
    color: var(--kpt-text-secondary);
    line-height: 1.6;
    max-width: 56ch;
    margin-bottom: var(--kpt-space-lg);
}
.kpt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kpt-space-sm);
    margin-bottom: var(--kpt-space-xl);
}
.kpt-hero__stats {
    display: flex;
    gap: clamp(var(--kpt-space-lg), 4vw, var(--kpt-space-2xl));
    padding-top: var(--kpt-space-lg);
    border-top: 1px solid var(--kpt-border-subtle);
}
.kpt-hero__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kpt-hero__stat-num {
    font-family: var(--kpt-font-display);
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 700;
    background: var(--kpt-gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kpt-hero__stat-label {
    font-size: var(--kpt-text-xs);
    color: var(--kpt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================================
   BREADCRUMB (compact, spec §38)
   ============================================================ */
.kpt-breadcrumb {
    padding-block: var(--kpt-space-sm);
}
.kpt-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
}
.kpt-breadcrumb li {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--kpt-text-xs);
}
.kpt-breadcrumb a { color: var(--kpt-text-muted); }
.kpt-breadcrumb a:hover { color: var(--kpt-gold); }
.kpt-breadcrumb span[aria-current] {
    color: var(--kpt-text-secondary);
    font-weight: var(--kpt-weight-medium);
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kpt-breadcrumb span[aria-hidden] { color: var(--kpt-text-disabled); }

/* ============================================================
   HORIZONTAL CAROUSEL ROW
   Used where a mobile-friendly scroll row beats a squeezed grid
   (e.g. Popular Videos, Shorts preview). Snap-scroll, no JS needed.
   ============================================================ */
.kpt-carousel {
    display: flex;
    gap: var(--kpt-space-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    --kpt-carousel-card-width: min(78vw, 320px);
}
.kpt-carousel--short { --kpt-carousel-card-width: min(42vw, 180px); }
.kpt-carousel::-webkit-scrollbar { display: none; }
.kpt-carousel > * {
    scroll-snap-align: start;
    flex: 0 0 var(--kpt-carousel-card-width);
    width: var(--kpt-carousel-card-width);
    max-width: 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .kpt-carousel {
        overflow-x: visible;
        display: grid;
        align-items: stretch;
    }
    .kpt-carousel--video { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kpt-carousel--short { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .kpt-carousel--video > *, .kpt-carousel--short > * {
        flex-basis: auto;
        width: auto;
    }
}
@media (min-width: 1100px) {
    .kpt-carousel--video { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   SKELETON LOADER (lightweight — spec §47)
   ============================================================ */
.kpt-skeleton {
    background: linear-gradient(90deg, var(--kpt-surface) 25%, var(--kpt-surface-elevated) 50%, var(--kpt-surface) 75%);
    background-size: 200% 100%;
    animation: kpt-skeleton-sweep 1.4s ease infinite;
    border-radius: var(--kpt-radius-sm);
}
@keyframes kpt-skeleton-sweep {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .kpt-skeleton { animation: none; background: var(--kpt-surface); }
}
.kpt-skeleton-card { aspect-ratio: 16/9; width: 100%; }

/* ============================================================
   ERROR STATE (friendly, no stack traces — spec §49)
   ============================================================ */
.kpt-error-state {
    text-align: center;
    padding: var(--kpt-space-xl) var(--kpt-space-lg);
    color: var(--kpt-text-muted);
    font-size: var(--kpt-text-sm);
}
.kpt-error-state__icon { font-size: 2rem; margin-bottom: var(--kpt-space-sm); opacity: 0.5; }

/* ============================================================
   BOTTOM NAV SPACING
   Reserve room at the page bottom so the fixed bottom nav never
   covers footer content or the last card in a grid (mobile only).
   ============================================================ */
@media (max-width: 959px) {
    #kpt-site.has-bottom-nav #kpt-content {
        padding-bottom: calc(var(--kpt-bottom-nav-h) + var(--kpt-safe-bottom) + var(--kpt-space-md));
    }
}

/* Fixed-size homepage media rows and pinned hero */
.kpt-carousel-wrap { position: relative; }
.kpt-carousel-next { display:none; position:absolute; right:-12px; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border:0; border-radius:50%; background:var(--kpt-gold-gradient); color:var(--kpt-bg-primary); font-size:24px; cursor:pointer; }
.kpt-hero--pinned { padding-block: clamp(24px, 5vw, 56px); }
.kpt-hero-pinned { display:grid; grid-template-columns:minmax(0,2fr) minmax(220px,1fr); gap:var(--kpt-space-md); }
.kpt-hero-feature, .kpt-hero-side-card { position:relative; display:block; overflow:hidden; border-radius:var(--kpt-radius-md); background:var(--kpt-surface); border:1px solid var(--kpt-border-subtle); }
.kpt-hero-feature { aspect-ratio:16/9; }
.kpt-hero-feature img, .kpt-hero-side-card__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.kpt-hero-feature__overlay { position:absolute; inset:auto 0 0; display:flex; flex-direction:column; gap:4px; padding:var(--kpt-space-lg); color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.85)); }
.kpt-hero-feature__overlay small { color:var(--kpt-gold-light); text-transform:uppercase; }
.kpt-hero-feature__overlay strong { font-size:clamp(20px,3vw,36px); }
.kpt-hero-side { display:grid; grid-template-rows:1fr 1fr; gap:var(--kpt-space-md); }
.kpt-hero-side-card__thumb { aspect-ratio:16/9; overflow:hidden; }
.kpt-hero-side-card > span { display:block; padding:var(--kpt-space-sm); font-weight:var(--kpt-weight-semibold); color:var(--kpt-text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:767px) { .kpt-hero-pinned { grid-template-columns:1fr; } .kpt-hero-side { grid-template-columns:1fr 1fr; grid-template-rows:none; } .kpt-hero-side-card__thumb { aspect-ratio:16/9; } .kpt-carousel-next { display:block; } }
@media (min-width:768px) { .kpt-carousel-wrap .kpt-carousel-next { display:none; } }
.kpt-video-grid > *, .kpt-news-grid > *, .kpt-services-grid > * { min-width:0; height:100%; }
.kpt-services-grid .kpt-service-card { display:flex; flex-direction:column; }
.kpt-services-grid .kpt-service-card > .kpt-btn { margin-top:auto; }
.kpt-services-grid .kpt-service-card__thumb { aspect-ratio:16/9; overflow:hidden; }
.kpt-services-grid .kpt-service-card__thumb img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   HOMEPAGE SHORTS ROWS (Shorts sections ONLY)
   Both homepage Shorts rows stay ONE horizontal scroll row on
   every viewport, so Previous/Next buttons and touch swipe work
   and the homepage never becomes an endless vertical list.
   Scoped to [data-shorts-row] — other carousels are untouched.
   ============================================================ */
.kpt-carousel-wrap--shorts-row { padding-right: 6px; }
.kpt-carousel-prev {
    display: none;
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: var(--kpt-gold-gradient);
    color: var(--kpt-bg-primary);
    font-size: 24px;
    cursor: pointer;
    opacity: 0.9;
    transition: opacity var(--kpt-transition-fast), transform var(--kpt-transition-fast);
}
.kpt-carousel-prev:hover, .kpt-carousel-wrap .kpt-carousel-next:hover { transform: translateY(-50%) scale(1.05); }
.kpt-carousel-prev:disabled, .kpt-carousel-next:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: default;
    transform: translateY(-50%);
}
@media (max-width: 767px) {
    /* Mobile: swipe navigation only — buttons never get in the way. */
    .kpt-carousel-wrap--shorts-row .kpt-carousel-prev,
    .kpt-carousel-wrap--shorts-row .kpt-carousel-next { display: none; }
}
@media (min-width: 768px) {
    .kpt-carousel-wrap--shorts-row .kpt-carousel--short[data-shorts-row] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: var(--kpt-space-sm);
        scroll-behavior: smooth;
    }
    .kpt-carousel-wrap--shorts-row .kpt-carousel--short[data-shorts-row] > * {
        flex: 0 0 min(180px, 15vw);
        width: min(180px, 15vw);
        scroll-snap-align: start;
    }
    .kpt-carousel-wrap--shorts-row .kpt-carousel-prev,
    .kpt-carousel-wrap--shorts-row .kpt-carousel-next { display: block; }
}