/* Localized Homepage Styles (Hindi & Spanish) -- Composed Strike restyle (2026-07, Task 11).
   Shared by /es and /hi (no scoped .razor.css of their own). Angular cut-corner language:
   rectangles die -> cut corners; purple purged -> teal datum + ember CTA; clip-path shears
   box-shadow/translateY lift, so hovers move to border+background only; focus rings inset. */

.homepage-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Hero Section */
.hero-section {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    margin-bottom: 4rem;
}

/* Double-layer reveal: element bg is the hairline border color; ::before paints the
   interior so the border follows the bevel. Interior gradient composited over
   --glytic-bg-dark (closest solid page base; original sat on the body gradient).
   z-index:-1 + isolation on the element keeps ALL children above the interior
   without per-child lifts (which cannot reach component-rendered children). */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.06) 0%, rgba(var(--forge-primary-rgb), 0.05) 100%), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.hero-title {
    font-family: var(--glytic-font-heading);
    font-size: 3rem;
    font-weight: 700;
    color: var(--glytic-text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.15;
    letter-spacing: 0.005em;
}

.hero-subtitle {
    font-size: 1.5rem;
    color: var(--glytic-primary);
    margin-bottom: 1rem;
    font-weight: 500;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    max-width: 800px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons -- ember cut-corner primary, hairline squared secondary */
.btn-primary-large,
.btn-secondary-large {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    font-family: var(--glytic-font-body);
}

.btn-primary-large {
    background: var(--forge-gradient-btn);
    color: var(--qf-ink);
    clip-path: var(--qf-clip-btn);
}

.btn-primary-large:hover {
    background: var(--forge-gradient);
    color: var(--qf-ink);
}

/* Ghost CTA: double-layer reveal so the outline follows the top-right bevel.
   Element bg = outline color; ::before (z-index:-1 + isolate, text-only element) = the
   interior fill (transparent base -> nearest solid surface --glytic-bg-medium). */
.btn-secondary-large {
    position: relative;
    isolation: isolate;
    background: var(--glytic-primary);
    border: 0;
    color: var(--glytic-primary);
    clip-path: var(--qf-clip-btn);
}

.btn-secondary-large::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary-large:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-medium);
}

.btn-primary-large:focus-visible,
.btn-secondary-large:focus-visible,
.btn-secondary:focus-visible {
    outline: 2px solid var(--glytic-primary);
    outline-offset: -4px;
}

.btn-secondary {
    position: relative;
    isolation: isolate;
    padding: 0.75rem 1.5rem;
    background: var(--glytic-border);
    border: 0;
    color: var(--glytic-primary);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    cursor: pointer;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = outline color; ::before = interior fill. */
.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-btn);
    background: var(--glytic-bg-medium);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.btn-secondary:hover {
    background: var(--glytic-border-hover);
}

.btn-secondary:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.1), rgba(var(--glytic-primary-rgb), 0.1)), var(--glytic-bg-medium);
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    color: var(--glytic-text-primary);
    font-weight: 700;
}

/* Features Section */
.features-section {
    margin-bottom: 4rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.feature-card {
    position: relative;
    isolation: isolate;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 2rem;
    text-align: center;
    transition: background 0.2s ease;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation on the element; children need no lift). */
.feature-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.feature-card:hover {
    background: var(--glytic-border-hover);
}

.feature-card:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.04), rgba(var(--glytic-primary-rgb), 0.04)), var(--glytic-card-bg);
}

.feature-icon {
    font-family: var(--glytic-font-heading);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--glytic-primary);
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    color: var(--glytic-text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.feature-card p {
    color: var(--glytic-text-secondary);
    line-height: 1.6;
}

/* Popular Exams Section */
.popular-exams-section {
    margin-bottom: 4rem;
}

.exams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.exam-card {
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
    padding: 1.5rem;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
    isolation: isolate;
}

/* Double-layer reveal: element bg = border color; ::before = card interior
   (z-index:-1 + isolation on the element; children need no lift). */
.exam-card::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: var(--glytic-card-bg);
    transition: background 0.2s ease;
    z-index: -1;
    pointer-events: none;
}

.exam-card:hover {
    background: var(--glytic-primary);
}

.exam-card:hover::before {
    background: linear-gradient(rgba(var(--glytic-primary-rgb), 0.05), rgba(var(--glytic-primary-rgb), 0.05)), var(--glytic-card-bg);
}

.exam-card h3 {
    font-size: 1.25rem;
    color: var(--glytic-text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.exam-card p {
    color: var(--glytic-text-secondary);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.exam-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--glytic-primary-rgb), 0.12);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.3);
    border-radius: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--glytic-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.view-all-container {
    text-align: center;
}

/* How It Works Section */
.how-it-works-section {
    margin-bottom: 4rem;
}

.steps-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.step {
    text-align: center;
    padding: 1.5rem;
}

.step-number {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: var(--forge-gradient-btn);
    border-radius: 0;
    clip-path: var(--qf-clip-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--glytic-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--qf-ink);
}

.step h3 {
    font-size: 1.25rem;
    color: var(--glytic-text-primary);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.step p {
    color: var(--glytic-text-secondary);
}

/* CTA Section */
.cta-section {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: 4rem 2rem;
    background: var(--glytic-border);
    border: 0;
    border-radius: 0;
    clip-path: var(--qf-clip-card);
}

/* Double-layer reveal: element bg = hairline border color; ::before = interior
   (gradient composited over --glytic-bg-dark, closest solid page base).
   z-index:-1 + isolation; children need no lift. */
.cta-section::before {
    content: '';
    position: absolute;
    inset: 1px;
    clip-path: var(--qf-clip-card);
    background: linear-gradient(135deg, rgba(var(--glytic-primary-rgb), 0.08) 0%, rgba(var(--forge-primary-rgb), 0.07) 100%), var(--glytic-bg-dark);
    z-index: -1;
    pointer-events: none;
}

.cta-section h2 {
    font-family: var(--glytic-font-heading);
    font-size: 2.5rem;
    color: var(--glytic-text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.cta-section p {
    font-size: 1.125rem;
    color: var(--glytic-text-secondary);
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.25rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .features-grid,
    .exams-grid,
    .steps-container {
        grid-template-columns: 1fr;
    }
}