/* ==========================================================
   LogicLoft Home v2 — additions
   Adds: puzzle ecosystem, flow cards, 4-product grid, extra
   brand badge colors. Uses the original dark/cyan/purple
   design tokens from variables.css and home.css.
   ========================================================== */

:root {
    --brand-evaluatd: #14b8a6;
    --brand-evaluatd-rgb: 20, 184, 166;
    --brand-enrolld: #f59e0b;
    --brand-enrolld-rgb: 245, 158, 11;
    --brand-dayready: #8b7cff;
    --brand-dayready-rgb: 139, 124, 255;
    --brand-submitd: #10b981;
    --brand-submitd-rgb: 16, 185, 129;
}

/* ---------- Extra product-card brand variants ---------- */
.product-card.submitd {
    --card-accent: var(--brand-submitd);
    --card-accent-rgb: var(--brand-submitd-rgb);
}
.product-card.dayready {
    --card-accent: var(--brand-dayready);
    --card-accent-rgb: var(--brand-dayready-rgb);
}
.product-card.submitd .product-card-icon,
.product-card.dayready .product-card-icon {
    background: rgba(var(--card-accent-rgb), 0.1);
    border-color: rgba(var(--card-accent-rgb), 0.3);
}
.product-card.submitd:hover,
.product-card.dayready:hover {
    border-color: rgba(var(--card-accent-rgb), 0.35);
    box-shadow: 0 0 40px rgba(var(--card-accent-rgb), 0.08);
}

/* Additional badge color variants */
.badge.green {
    background: rgba(var(--brand-submitd-rgb), 0.12);
    color: var(--brand-submitd);
    border: 1px solid rgba(var(--brand-submitd-rgb), 0.3);
}
.badge.violet {
    background: rgba(var(--brand-dayready-rgb), 0.12);
    color: var(--brand-dayready);
    border: 1px solid rgba(var(--brand-dayready-rgb), 0.3);
}

/* 4-up product grid */
.products-grid-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4, 1.5rem);
}
@media (max-width: 720px) { .products-grid-4 { grid-template-columns: 1fr; } }

/* Product card inline action row */
.product-card-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1.25rem;
}
.product-card-sublink {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color .25s;
}
.product-card-sublink:hover { color: var(--text-primary); }


/* ==========================================================
   PUZZLE — 4 interlocking pieces
   ========================================================== */
.puzzle-wrap {
    position: relative;
    max-width: 560px;
    margin: 2.5rem auto 0;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
}
.puzzle-wrap::before {
    content: '';
    position: absolute;
    inset: -8%;
    background:
        radial-gradient(ellipse at 28% 28%, rgba(var(--brand-evaluatd-rgb), 0.18), transparent 55%),
        radial-gradient(ellipse at 72% 28%, rgba(var(--brand-enrolld-rgb),  0.18), transparent 55%),
        radial-gradient(ellipse at 28% 72%, rgba(var(--brand-submitd-rgb),  0.18), transparent 55%),
        radial-gradient(ellipse at 72% 72%, rgba(var(--brand-dayready-rgb), 0.18), transparent 55%);
    filter: blur(22px);
    z-index: 0;
    pointer-events: none;
}
.puzzle {
    position: relative;
    width: 100%;
    height: auto;
    overflow: visible;
    z-index: 1;
}
.puzzle a { cursor: pointer; outline: none; }
.puzzle .piece { transition: filter .35s ease; }
.puzzle .piece path {
    transition: fill .35s ease, stroke .35s ease, stroke-width .35s ease;
}
.puzzle a:hover .piece-eval { filter: drop-shadow(0 0 22px rgba(var(--brand-evaluatd-rgb), 0.55)); }
.puzzle a:hover .piece-enr  { filter: drop-shadow(0 0 22px rgba(var(--brand-enrolld-rgb),  0.55)); }
.puzzle a:hover .piece-sub  { filter: drop-shadow(0 0 22px rgba(var(--brand-submitd-rgb),  0.55)); }
.puzzle a:hover .piece-day  { filter: drop-shadow(0 0 22px rgba(var(--brand-dayready-rgb), 0.55)); }
.puzzle a:hover .piece path { stroke-width: 2.5; }
.puzzle a:focus-visible .piece path { stroke-width: 2.5; stroke: #fff; }

.puzzle .p-label {
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-transform: uppercase;
    fill: rgba(255, 255, 255, 0.78);
    pointer-events: none;
}
.puzzle a:hover .p-label { fill: rgba(255, 255, 255, 1); }
.puzzle .p-logo-img {
    filter: brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,0.7));
    pointer-events: none;
}

@media (max-width: 640px) {
    .puzzle-wrap { max-width: 420px; }
}


/* ==========================================================
   ECOSYSTEM flow cards
   ========================================================== */
.flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2rem;
}
@media (max-width: 900px) { .flow-grid { grid-template-columns: 1fr; } }

.flow-card {
    padding: 1.75rem;
    border-radius: 14px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    position: relative;
    overflow: hidden;
    transition: border-color .3s, transform .3s;
}
.flow-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-2px);
}
.flow-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-rgb), 0.4), transparent);
}
.flow-card .pair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.flow-card .chip {
    padding: 0.22rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    border: 1px solid currentColor;
}
.flow-card .chip.eval { color: var(--brand-evaluatd); background: rgba(var(--brand-evaluatd-rgb), 0.1); }
.flow-card .chip.enr  { color: var(--brand-enrolld);  background: rgba(var(--brand-enrolld-rgb),  0.1); }
.flow-card .chip.day  { color: var(--brand-dayready); background: rgba(var(--brand-dayready-rgb), 0.1); }
.flow-card .chip.sub  { color: var(--brand-submitd);  background: rgba(var(--brand-submitd-rgb),  0.1); }
.flow-card .arrow {
    color: var(--text-tertiary);
    font-weight: 500;
}
.flow-card h4 {
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    line-height: 1.3;
}
.flow-card p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.55;
}

/* ==========================================================
   Background image visibility — let the classroom photo show
   ========================================================== */
.hero .hero-bg-image {
    opacity: 1;
    filter: saturate(1.05) contrast(1.02);
}
.hero .hero-bg-overlay {
    background: linear-gradient(
        180deg,
        rgba(10, 14, 26, 0.55) 0%,
        rgba(10, 14, 26, 0.35) 35%,
        rgba(10, 14, 26, 0.55) 70%,
        rgba(10, 14, 26, 0.80) 100%
    );
}
/* Vignette focus behind hero text for legibility */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 55% at center 55%,
                 rgba(10, 14, 26, 0.55) 0%,
                 rgba(10, 14, 26, 0.25) 55%,
                 transparent 100%);
    z-index: 1;
    pointer-events: none;
}
.hero-content { z-index: 3 !important; }

.cta-section .cta-bg-image {
    opacity: 1;
    filter: saturate(1.05) contrast(1.02);
}
.cta-section .cta-bg-overlay {
    background: linear-gradient(
        135deg,
        rgba(10, 14, 26, 0.58) 0%,
        rgba(10, 14, 26, 0.40) 50%,
        rgba(10, 14, 26, 0.62) 100%
    );
}
.cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 60% at center,
                 rgba(10, 14, 26, 0.55) 0%,
                 rgba(10, 14, 26, 0.2) 55%,
                 transparent 100%);
    z-index: 0;
    pointer-events: none;
}

/* Amber dropdown dot convenience */
.dropdown-dot.amber {
    background: var(--brand-enrolld);
    box-shadow: 0 0 10px var(--brand-enrolld);
}

/* ==========================================================
   Mobile / touch friendliness
   ========================================================== */

/* Skip link for keyboard users */
.skip-link {
    position: absolute;
    top: -60px;
    left: 1rem;
    background: var(--accent-primary);
    color: #0a0e1a;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    z-index: 1000;
    transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }

/* Touch feedback — glow on :active replicates :hover for touch devices */
.puzzle a:active .piece-eval { filter: drop-shadow(0 0 22px rgba(var(--brand-evaluatd-rgb), 0.7)); }
.puzzle a:active .piece-enr  { filter: drop-shadow(0 0 22px rgba(var(--brand-enrolld-rgb),  0.7)); }
.puzzle a:active .piece-sub  { filter: drop-shadow(0 0 22px rgba(var(--brand-submitd-rgb),  0.7)); }
.puzzle a:active .piece-day  { filter: drop-shadow(0 0 22px rgba(var(--brand-dayready-rgb), 0.7)); }
.puzzle a:active .piece path { stroke-width: 2.5; }

/* Enlarge interactive hit area hint — SVG anchors already full-piece */
.puzzle a { -webkit-tap-highlight-color: transparent; }

/* Minimum tap target on small CTAs */
.product-card-link, .product-card-sublink {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

/* Hero mobile tuning */
@media (max-width: 720px) {
    .hero { min-height: auto; padding: 110px 1rem 3.5rem; }
    .hero-content { padding: 1rem; }
    .hero-content h1 { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.1; }
    .hero-content .lead { font-size: 1rem; }
    .hero-badge { font-size: 0.65rem; padding: 0.4rem 0.8rem; }
    .hero-actions { flex-direction: column; width: 100%; gap: 0.6rem; }
    .hero-actions .btn { width: 100%; justify-content: center; }
    .hero-stats { gap: 1.25rem; flex-wrap: wrap; justify-content: center; padding-top: 2rem; }
    .hero-stat { min-width: 28%; }
    .hero-stat-number { font-size: clamp(1.5rem, 6vw, 2rem); }

    /* soften the radial vignette on mobile */
    .hero::after {
        background: radial-gradient(ellipse 90% 60% at center,
                    rgba(10, 14, 26, 0.6) 0%,
                    rgba(10, 14, 26, 0.3) 60%,
                    transparent 100%);
    }
}

@media (max-width: 900px) {
    /* Puzzle — keep labels readable on small screens */
    .puzzle-wrap { max-width: 380px; margin: 1.5rem auto 0; }
}
@media (max-width: 420px) {
    .puzzle-wrap { max-width: 92vw; }
}

/* Section headers on mobile */
@media (max-width: 720px) {
    .section-header h2 { font-size: clamp(1.75rem, 7vw, 2.25rem); line-height: 1.15; }
    .section-header .section-description { font-size: 0.95rem; }
    .section { padding: 3.5rem 0; }
    .flow-grid { gap: 0.9rem; margin-top: 1.5rem; }
    .flow-card { padding: 1.25rem; }
    .flow-card h4 { font-size: 1.05rem; }
    .flow-card p { font-size: 0.88rem; }
    .product-card-actions { gap: 0.75rem; }

    /* CTA */
    .cta-section .cta-actions { flex-direction: column; width: 100%; gap: 0.6rem; }
    .cta-section .cta-actions .btn { width: 100%; justify-content: center; }
}

/* Disable heavy animations on motion-sensitive preference */
@media (prefers-reduced-motion: reduce) {
    .puzzle .piece, .puzzle .piece path,
    .flow-card, .product-card, .hero-gradient-orb {
        animation: none !important;
        transition: none !important;
    }
}