/* Shared modern skin for every public interior page. Home and /courses keep their own art direction. */

.public-page:not(.modern-courses-page) {
    color: var(--text-primary);
    background: var(--background);
}

.public-page:not(.modern-courses-page) main,
.public-page:not(.modern-courses-page) .band {
    position: relative;
}

.public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) {
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}

.public-page.page-content .page-hero,
.public-page.page-service .page-hero {
    position: relative;
    display: grid;
    align-items: end;
    min-height: clamp(500px, 68vh, 680px);
    padding-block: clamp(54px, 8vw, 98px) clamp(34px, 5vw, 64px);
    border-bottom: 0;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(8, 31, 54, 0.94) 0%, rgba(8, 43, 66, 0.82) 42%, rgba(20, 119, 168, 0.34) 100%),
        var(--hero-image, url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1800&q=80")) center / cover;
    box-shadow: none;
}

.public-page.page-content .page-hero::before,
.public-page.page-service .page-hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    z-index: -1;
    background: linear-gradient(180deg, transparent, rgba(3, 16, 30, 0.78));
    pointer-events: none;
}

.public-page.page-content .page-hero::after,
.public-page.page-service .page-hero::after {
    content: "";
    position: absolute;
    inset-inline: clamp(18px, 6vw, 90px);
    bottom: 0;
    height: 1px;
    z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    pointer-events: none;
}

.public-page.page-content .page-hero .container,
.public-page.page-service .page-hero .container {
    position: relative;
    z-index: 2;
}

.public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) .hero-content {
    max-width: 760px;
}

.public-page.page-content .page-hero .hero-content,
.public-page.page-service .page-hero .hero-content {
    width: min(820px, 100%);
    max-width: 820px;
    padding-block: 0;
}

.public-page.page-content .page-hero .eyebrow,
.public-page.page-service .page-hero .eyebrow {
    margin-bottom: 0.95rem;
    padding: 0.4rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.public-page.page-content .page-hero h1,
.public-page.page-service .page-hero h1 {
    max-width: 840px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.55rem, 5.7vw, 5rem);
    line-height: 1.04;
    font-weight: 900;
    text-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.public-page.page-content .page-hero p:not(.eyebrow),
.public-page.page-service .page-hero p:not(.eyebrow) {
    max-width: 710px;
    margin-top: 1rem;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    line-height: 1.9;
}

.public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) .hero-actions {
    gap: 12px;
    margin-top: 28px;
}

.public-page.page-content .page-hero .hero-actions,
.public-page.page-service .page-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) .hero-actions .btn {
    min-height: 48px;
}

.public-page.page-content .page-hero .hero-actions .btn,
.public-page.page-service .page-hero .hero-actions .btn {
    min-height: 52px;
    padding-inline: 1.15rem;
    border-radius: 8px;
}

.public-page.page-content .page-hero .hero-actions .btn-primary,
.public-page.page-service .page-hero .hero-actions .btn-primary {
    color: var(--primary);
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
}

.public-page.page-content .page-hero .hero-actions .btn-primary:hover,
.public-page.page-service .page-hero .hero-actions .btn-primary:hover {
    color: var(--primary);
    background: color-mix(in srgb, #ffffff 92%, var(--primary));
}

.public-page.page-content .page-hero .hero-actions .btn-outline,
.public-page.page-service .page-hero .hero-actions .btn-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
}

.public-page:not(.modern-courses-page) :where(.band, .cart-page, .checkout-page, .order-detail-page, .auth-page, .course-watch-page) {
    padding-block: clamp(52px, 7vw, 96px);
}

.public-page:not(.modern-courses-page) :where(.section-head, .section-title) {
    margin-bottom: 24px;
}

.public-page:not(.modern-courses-page) :where(.section-title h1, .section-title h2, .section-head h1, .section-head h2) {
    color: var(--text-primary);
    line-height: 1.3;
}

.public-page:not(.modern-courses-page) :where(.section-title p, .section-head p) {
    max-width: 700px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.public-page:not(.modern-courses-page) :where(.card, .service-card, .course-card, .course-card-pro, .checkout-panel, .cart-summary, .contact-panel, .contact-info-card, .consultation-form-card, .auth-card, .profile-card, .order-summary-card, .empty-state, .platform-page-card) {
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

.public-page:not(.modern-courses-page) :where(.service-card, .course-card, .course-card-pro) {
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.public-page:not(.modern-courses-page) :where(.service-card, .course-card, .course-card-pro):hover {
    transform: translateY(-4px);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
}

.public-page:not(.modern-courses-page) :where(input, select, textarea) {
    min-height: 47px;
    border-color: var(--border);
    border-radius: 11px;
    color: var(--text-primary);
    background: var(--surface);
    box-shadow: none;
}

.public-page:not(.modern-courses-page) :where(input, select, textarea):focus {
    border-color: var(--primary);
    outline: 0;
    background: var(--surface-elevated);
    box-shadow: var(--focus-ring);
}

.public-page:not(.modern-courses-page) :where(.btn-primary) {
    min-height: 46px;
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: var(--button-shadow);
}

.public-page:not(.modern-courses-page) :where(.btn-primary):hover {
    background: var(--primary-light);
    box-shadow: var(--button-shadow-hover);
}

.public-page:not(.modern-courses-page) :where(.btn-outline, .btn-muted) {
    min-height: 46px;
    border-color: var(--border);
    color: var(--primary);
    background: var(--surface-elevated);
}

.public-page:not(.modern-courses-page) :where(.btn-outline, .btn-muted):hover {
    border-color: var(--primary-light);
    color: var(--primary);
    background: var(--primary-soft);
}

.public-page:not(.modern-courses-page) :where(.tag, .badge, .status-pill) {
    border-color: var(--border);
    color: var(--primary);
    background: var(--primary-soft);
}

.public-page:not(.modern-courses-page) :where(.checkout-steps, .checkout-trust-grid, .cart-summary-points, .payment-steps-list) {
    gap: 12px;
}

.public-page:not(.modern-courses-page) .checkout-trust-grid article,
.public-page:not(.modern-courses-page) .payment-steps-list article,
.public-page:not(.modern-courses-page) .cart-summary-points span {
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
}

.public-page:not(.modern-courses-page) :where(.cart-item, .checkout-items article, .order-detail-items article) {
    border-color: var(--border);
    background: var(--surface-elevated);
}

.public-page:not(.modern-courses-page) :where(.cart-summary, .checkout-summary) {
    border-color: var(--primary-soft);
    background: var(--surface-gradient);
}

.public-page:not(.modern-courses-page) :where(.contact-panel, .consultation-form-card, .auth-card) {
    border-color: var(--border);
}

.public-page:not(.modern-courses-page) :where(.faq-item, .platform-page-content, .testimonial-card, .journey-step) {
    border-color: var(--border);
    background: var(--surface-elevated);
}

.public-page.course-watch-body:not(.modern-courses-page) :where(.watch-card, .watch-summary-card, .lesson-workspace, .watch-playlist) {
    border-color: var(--border);
    background: var(--surface-elevated);
    box-shadow: var(--shadow-sm);
}

.public-page.course-watch-body:not(.modern-courses-page) :where(.watch-topbar, .learning-bar) {
    border-color: var(--border);
    background: var(--surface-elevated);
}

@media (max-width: 760px) {
    .public-page.page-content .page-hero,
    .public-page.page-service .page-hero {
        min-height: 520px;
        padding-block: 66px 42px;
        background:
            linear-gradient(180deg, rgba(8, 31, 54, 0.94) 0%, rgba(8, 43, 66, 0.86) 48%, rgba(20, 119, 168, 0.42) 100%),
            var(--hero-image, url("https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=1800&q=80")) center / cover;
    }

    .public-page.page-content .page-hero h1,
    .public-page.page-service .page-hero h1 {
        font-size: clamp(2.15rem, 11vw, 3.35rem);
        line-height: 1.08;
    }

    .public-page.page-content .page-hero p:not(.eyebrow),
    .public-page.page-service .page-hero p:not(.eyebrow) {
        font-size: 1rem;
        line-height: 1.75;
    }

    .public-page:not(.modern-courses-page) :where(.band, .cart-page, .checkout-page, .order-detail-page, .auth-page, .course-watch-page) {
        padding-block: 46px 62px;
    }

    .public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) .hero-actions,
    .public-page:not(.modern-courses-page) :where(.page-hero, .contact-hero, .consultation-hero, .service-hero) .hero-actions .btn {
        width: 100%;
    }

    .public-page:not(.modern-courses-page) :where(.card, .service-card, .course-card, .course-card-pro, .checkout-panel, .cart-summary, .contact-panel, .contact-info-card, .consultation-form-card, .auth-card, .profile-card, .order-summary-card, .empty-state, .platform-page-card) {
        border-radius: 15px;
    }
}

body:not(.panel-body) .modern-interior-hero {
    position: relative !important;
    display: grid !important;
    align-items: center !important;
    min-height: auto !important;
    padding-block: clamp(72px, 9vw, 128px) !important;
    border: 0 !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 84% 17%, rgba(115, 184, 255, .4), transparent 20%),
        radial-gradient(circle at 12% 91%, rgba(0, 223, 255, .17), transparent 26%),
        linear-gradient(120deg, #08245E 0%, #0044FF 55%, #1C68E8 100%) !important;
    box-shadow: none !important;
}

body:not(.panel-body) .modern-interior-hero::before {
    content: none !important;
}

body:not(.panel-body) .modern-interior-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: auto auto -170px -6% !important;
    width: min(43vw, 620px) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    z-index: 0 !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: 0 0 0 56px rgba(255, 255, 255, .04), 0 0 0 112px rgba(255, 255, 255, .025) !important;
    pointer-events: none !important;
}

body:not(.panel-body) .modern-interior-hero-grid {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .6fr) !important;
    gap: clamp(36px, 6vw, 96px) !important;
    align-items: center !important;
}

body:not(.panel-body) .modern-interior-hero .container {
    position: relative !important;
    z-index: 2 !important;
}

body:not(.panel-body) .modern-interior-hero .hero-content {
    width: min(760px, 100%) !important;
    max-width: 760px !important;
    padding-block: 0 !important;
}

body:not(.panel-body) .modern-interior-hero .eyebrow {
    margin-bottom: 1rem !important;
    padding: 0.42rem 0.78rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
    backdrop-filter: blur(12px) !important;
}

body:not(.panel-body) .modern-interior-hero h1 {
    max-width: 750px !important;
    margin: 20px 0 18px !important;
    color: #ffffff !important;
    font-size: clamp(2.45rem, 5.2vw, 4.85rem) !important;
    line-height: 1.08 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
}

body:not(.panel-body) .modern-interior-hero p:not(.eyebrow) {
    max-width: 650px !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: clamp(1rem, 1.55vw, 1.16rem) !important;
    line-height: 1.9 !important;
}

body:not(.panel-body) .modern-interior-hero .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-top: clamp(1.35rem, 3vw, 2.1rem) !important;
}

body:not(.panel-body) .modern-interior-hero .hero-actions .btn {
    min-height: 50px !important;
    padding-inline: 22px !important;
    border-radius: 12px !important;
}

body:not(.panel-body) .modern-interior-hero .hero-actions .btn-primary {
    color: var(--primary) !important;
    border-color: #ffffff !important;
    background: #ffffff !important;
}

body:not(.panel-body) .modern-interior-hero .hero-actions .btn-outline {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.44) !important;
    background: rgba(255, 255, 255, 0.13) !important;
}

body:not(.panel-body) .modern-interior-hero-panel {
    position: relative !important;
    overflow: hidden !important;
    display: grid !important;
    gap: 22px !important;
    padding: clamp(28px, 4vw, 40px) !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 28px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)) !important;
    box-shadow: 0 28px 70px rgba(1, 17, 57, .3), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
    backdrop-filter: blur(12px) !important;
}

body:not(.panel-body) .modern-interior-hero-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -70px -90px auto !important;
    width: 220px !important;
    aspect-ratio: 1 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 50% !important;
}

body:not(.panel-body) .modern-interior-panel-label {
    color: rgba(255, 255, 255, .8) !important;
    font-size: .92rem !important;
}

body:not(.panel-body) .modern-interior-hero-stages {
    display: grid !important;
    gap: 10px !important;
}

body:not(.panel-body) .modern-interior-hero-stages div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 11px 12px !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: 12px !important;
    background: rgba(4, 25, 70, .14) !important;
}

body:not(.panel-body) .modern-interior-hero-stages b {
    flex: 0 0 auto !important;
    color: #C6DEFF !important;
    font-size: .76rem !important;
    letter-spacing: .08em !important;
}

body:not(.panel-body) .modern-interior-hero-stages span {
    color: #ffffff !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
}

body:not(.panel-body) .modern-interior-hero-panel > p {
    position: relative !important;
    z-index: 1 !important;
    color: rgba(255, 255, 255, .8) !important;
    font-size: .9rem !important;
    line-height: 1.75 !important;
}

@media (max-width: 760px) {
    body:not(.panel-body) .modern-interior-hero {
        min-height: auto !important;
        padding-block: 66px 72px !important;
        background:
            radial-gradient(circle at 84% 17%, rgba(115, 184, 255, .34), transparent 24%),
            linear-gradient(120deg, #08245E 0%, #0044FF 58%, #1C68E8 100%) !important;
    }

    body:not(.panel-body) .modern-interior-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    body:not(.panel-body) .modern-interior-hero h1 {
        font-size: clamp(2.3rem, 11vw, 3.45rem) !important;
        line-height: 1.08 !important;
    }

    body:not(.panel-body) .modern-interior-hero .hero-actions,
    body:not(.panel-body) .modern-interior-hero .hero-actions .btn {
        width: 100% !important;
    }
}