/* =========================================================
   TRIGONOMETRY HUB
   Page-specific styling for:
   /trigonometry-tutoring-online/
   ========================================================= */

:root
{
    --trig-navy: #0f172a;
    --trig-slate: #475569;
    --trig-muted: #64748b;

    --trig-border: #d7e2ec;

    --trig-white: #ffffff;
    --trig-surface: #f8fafc;

    --trig-teal: #0f766e;
    --trig-teal-bright: #159e9c;
    --trig-teal-soft: #ecfdf5;

    --trig-blue: #2563eb;
    --trig-blue-soft: #eff6ff;

    --trig-gold: #d97706;
    --trig-gold-soft: #fff7ed;

    --trig-shadow:
        0 1rem 2.5rem
        rgba(
            15,
            23,
            42,
            0.08
        );

    --trig-shadow-small:
        0 0.75rem 2rem
        rgba(
            15,
            23,
            42,
            0.06
        );
}


/* =========================================================
   BASE
   ========================================================= */

#trigonometry-learning-hub
{
    scroll-margin-top: 5rem;
}

.trig-hub-section,
.trig-summary-card,
.trig-resource-card,
.trig-topic-card,
.trig-approach-card,
.trig-faq-card,
.trig-hub-cta
{
    color: var(--trig-slate);

    font-family:
        Inter,
        Arial,
        sans-serif;
}

.trig-hub-eyebrow,
.trig-resource-kicker
{
    margin:
        0
        0
        0.45rem;

    color: var(--trig-teal);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.1em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   INTRO SUMMARY CARD
   ========================================================= */

.trig-summary-card
{
    padding:
        clamp(
            1.35rem,
            4vw,
            1.8rem
        );

    background:
        linear-gradient(
            135deg,
            var(--trig-teal-soft),
            var(--trig-blue-soft)
        );

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.22
        );

    border-radius: 1.15rem;

    box-shadow: var(--trig-shadow-small);
}

.trig-summary-card h3
{
    color: var(--trig-navy);

    font-weight: 800;
}

.trig-summary-row
{
    display: grid;

    grid-template-columns:
        7.25rem
        minmax(0, 1fr);

    gap: 1rem;

    align-items: start;

    padding:
        0.9rem
        0;

    border-bottom:
        1px solid
        rgba(
            148,
            163,
            184,
            0.24
        );
}

.trig-summary-row:last-child
{
    padding-bottom: 0;

    border-bottom: 0;
}

.trig-summary-row span
{
    color: var(--trig-muted);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.trig-summary-row strong
{
    color: var(--trig-navy);

    font-size: 0.9rem;

    line-height: 1.55;
}


/* =========================================================
   LEARNING HUB SECTION
   ========================================================= */

.trig-hub-section
{
    padding:
        clamp(
            4rem,
            8vw,
            6rem
        )
        0;

    background: var(--trig-surface);
}

.trig-hub-heading
{
    max-width: 52rem;

    margin-bottom:
        clamp(
            2rem,
            5vw,
            3rem
        );
}

.trig-hub-heading h2
{
    margin-bottom: 0.85rem;

    color: var(--trig-navy);

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.65rem
        );

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 1.15;
}

.trig-hub-heading p
{
    margin-bottom: 0;

    color: var(--trig-slate);

    font-size: 1.03rem;

    line-height: 1.75;
}


/* =========================================================
   RESOURCE GRID
   ========================================================= */

.trig-resource-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1.25rem;
}

.trig-resource-card
{
    display: flex;

    flex-direction: column;

    min-width: 0;
    min-height: 100%;

    padding:
        clamp(
            1.25rem,
            3vw,
            1.6rem
        );

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 1.15rem;

    box-shadow: var(--trig-shadow-small);

    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.trig-resource-card:hover
{
    border-color:
        rgba(
            13,
            148,
            136,
            0.38
        );

    box-shadow: var(--trig-shadow);

    transform:
        translateY(-3px);
}

.trig-resource-card-featured
{
    background:
        linear-gradient(
            135deg,
            var(--trig-teal-soft),
            var(--trig-blue-soft)
        );

    border-color:
        rgba(
            13,
            148,
            136,
            0.28
        );
}

.trig-resource-card-secondary
{
    background:
        linear-gradient(
            135deg,
            var(--trig-white),
            var(--trig-blue-soft)
        );
}

.trig-resource-top
{
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 1rem;
}

.trig-resource-number
{
    color: var(--trig-muted);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}

.trig-resource-icon
{
    display: grid;

    width: 2.8rem;
    height: 2.8rem;

    place-items: center;

    color: var(--trig-teal);

    background: var(--trig-teal-soft);

    border-radius: 0.85rem;
}

.trig-resource-card-featured .trig-resource-icon
{
    background:
        rgba(
            255,
            255,
            255,
            0.8
        );
}

.trig-resource-card h3
{
    margin:
        0
        0
        0.55rem;

    color: var(--trig-navy);

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.45rem
        );

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.25;
}

.trig-resource-card > p:not(.trig-resource-kicker)
{
    margin-bottom: 1.25rem;

    color: var(--trig-slate);

    line-height: 1.7;
}

.trig-resource-actions
{
    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

    margin-top: auto;
}

.trig-resource-btn
{
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 2.45rem;

    padding:
        0.55rem
        0.85rem;

    color: var(--trig-navy);

    font-size: 0.8rem;
    font-weight: 800;

    text-decoration: none;

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 0.75rem;

    transition:
        background 160ms ease,
        color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease;
}

.trig-resource-btn:hover
{
    color: var(--trig-teal);

    text-decoration: none;

    border-color:
        rgba(
            13,
            148,
            136,
            0.42
        );

    transform:
        translateY(-1px);
}

.trig-resource-btn-primary
{
    color: var(--trig-white);

    background: var(--trig-teal);

    border-color: var(--trig-teal);
}

.trig-resource-btn-primary:hover
{
    color: var(--trig-white);

    background: #0c655e;

    border-color: #0c655e;
}

.trig-resource-btn-pdf
{
    color: var(--trig-teal);

    background: var(--trig-teal-soft);

    border-color:
        rgba(
            13,
            148,
            136,
            0.25
        );
}

.trig-resource-btn-pdf:hover
{
    color: #0c655e;

    background: #dcf7f2;
}


/* =========================================================
   TUTORING TOPICS
   ========================================================= */

.trig-topic-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.trig-topic-card
{
    min-width: 0;

    padding: 1.2rem;

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 1rem;

    box-shadow: var(--trig-shadow-small);
}

.trig-topic-icon
{
    display: grid;

    width: 2.6rem;
    height: 2.6rem;

    margin-bottom: 0.8rem;

    place-items: center;

    color: var(--trig-teal);

    background: var(--trig-teal-soft);

    border-radius: 0.8rem;
}

.trig-topic-card h3
{
    margin:
        0
        0
        0.45rem;

    color: var(--trig-navy);

    font-size: 1rem;
    font-weight: 800;
}

.trig-topic-card p
{
    margin: 0;

    color: var(--trig-slate);

    font-size: 0.9rem;

    line-height: 1.65;
}


/* =========================================================
   APPROACH CARD
   ========================================================= */

.trig-approach-card
{
    padding:
        clamp(
            1.35rem,
            4vw,
            1.8rem
        );

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 1.15rem;

    box-shadow: var(--trig-shadow-small);
}

.trig-approach-card h3
{
    color: var(--trig-navy);

    font-weight: 800;
}

.trig-approach-list
{
    display: grid;

    gap: 0.7rem;

    padding-left: 1.25rem;
}

.trig-approach-list li
{
    color: var(--trig-slate);

    line-height: 1.6;
}

.trig-approach-list li::marker
{
    color: var(--trig-teal);
}


/* =========================================================
   FAQ
   ========================================================= */

.trig-faq-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 1rem;
}

.trig-faq-card
{
    min-width: 0;

    padding: 1.2rem;

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 1rem;

    box-shadow: var(--trig-shadow-small);
}

.trig-faq-card h3
{
    margin:
        0
        0
        0.45rem;

    color: var(--trig-navy);

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.4;
}

.trig-faq-card p
{
    margin: 0;

    color: var(--trig-slate);

    font-size: 0.9rem;

    line-height: 1.65;
}


/* =========================================================
   FINAL CTA
   ========================================================= */

.trig-hub-cta-section
{
    padding:
        clamp(
            4rem,
            8vw,
            6rem
        )
        0;

    background: var(--trig-surface);
}

.trig-hub-cta
{
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        auto;

    gap: 1.5rem;

    align-items: center;

    padding:
        clamp(
            1.5rem,
            4vw,
            2.2rem
        );

    background: var(--trig-navy);

    border-radius: 1.25rem;

    box-shadow: var(--trig-shadow);
}

.trig-hub-cta h2
{
    margin:
        0
        0
        0.65rem;

    color: var(--trig-white);

    font-size:
        clamp(
            1.55rem,
            3vw,
            2.05rem
        );

    font-weight: 800;

    letter-spacing: -0.03em;
}

.trig-hub-cta p
{
    margin: 0;

    color: #cbd5e1;

    line-height: 1.7;
}

.trig-hub-cta .trig-hub-eyebrow
{
    color: #5eead4;
}


/* =========================================================
   LINK / FOCUS STATES
   ========================================================= */

.trig-resource-btn:focus-visible,
.trig-resource-card a:focus-visible
{
    outline:
        3px solid
        rgba(
            37,
            99,
            235,
            0.38
        );

    outline-offset: 3px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px)
{
    .trig-resource-grid
    {
        grid-template-columns: 1fr;
    }

    .trig-topic-grid
    {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .trig-hub-cta
    {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px)
{
    .trig-hub-section,
    .trig-hub-cta-section
    {
        padding:
            4rem
            0;
    }

    .trig-summary-row
    {
        grid-template-columns: 1fr;

        gap: 0.35rem;
    }

    .trig-resource-card
    {
        padding: 1.1rem;

        border-radius: 1rem;
    }

    .trig-resource-actions
    {
        display: grid;

        grid-template-columns: 1fr;
    }

    .trig-resource-btn
    {
        width: 100%;
    }

    .trig-topic-grid,
    .trig-faq-grid
    {
        grid-template-columns: 1fr;
    }

    .trig-hub-cta
    {
        padding: 1.25rem;

        border-radius: 1rem;
    }

    .trig-hub-cta .btn
    {
        width: 100%;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 479.98px)
{
    .trig-summary-card,
    .trig-resource-card,
    .trig-topic-card,
    .trig-approach-card,
    .trig-faq-card,
    .trig-hub-cta
    {
        padding: 1rem;
    }

    .trig-resource-top
    {
        margin-bottom: 0.8rem;
    }

    .trig-resource-icon
    {
        width: 2.5rem;
        height: 2.5rem;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce)
{
    .trig-resource-card,
    .trig-resource-btn
    {
        transition: none;
    }

    .trig-resource-card:hover,
    .trig-resource-btn:hover
    {
        transform: none;
    }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print
{
    .trig-resource-actions,
    .trig-hub-cta-section
    {
        display: none !important;
    }

    .trig-summary-card,
    .trig-resource-card,
    .trig-topic-card,
    .trig-approach-card,
    .trig-faq-card
    {
        break-inside: avoid;

        box-shadow: none;
    }
}

/* =========================================================
   MODERN LOWER HALF
   ========================================================= */

.trig-struggle-section
{
    padding:
        clamp(
            4.5rem,
            8vw,
            6.5rem
        )
        0;

    background:
        linear-gradient(
            180deg,
            var(--trig-white),
            var(--trig-surface)
        );
}

.trig-section-heading
{
    max-width: 52rem;

    margin-bottom: 2rem;
}

.trig-section-heading h2
{
    margin-bottom: 0.8rem;

    color: var(--trig-navy);

    font-size:
        clamp(
            1.9rem,
            4vw,
            2.6rem
        );

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 1.15;
}

.trig-section-heading p
{
    margin: 0;

    color: var(--trig-slate);

    font-size: 1.02rem;

    line-height: 1.75;
}


/* =========================================================
   STRUGGLE CARDS
   ========================================================= */

.trig-struggle-grid
{
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 1rem;

    margin-bottom:
        clamp(
            3rem,
            6vw,
            4.5rem
        );
}

.trig-struggle-card
{
    min-width: 0;

    padding: 1.25rem;

    background: var(--trig-white);

    border:
        1px solid
        var(--trig-border);

    border-radius: 1rem;

    box-shadow: var(--trig-shadow-small);
}

.trig-struggle-icon
{
    display: grid;

    width: 2.8rem;
    height: 2.8rem;

    margin-bottom: 0.85rem;

    place-items: center;

    color: var(--trig-teal);

    background: var(--trig-teal-soft);

    border-radius: 0.85rem;
}

.trig-struggle-card h3
{
    margin-bottom: 0.5rem;

    color: var(--trig-navy);

    font-size: 1rem;
    font-weight: 800;
}

.trig-struggle-card p
{
    margin: 0;

    color: var(--trig-slate);

    font-size: 0.9rem;

    line-height: 1.65;
}


/* =========================================================
   METHOD CARD
   ========================================================= */

.trig-method-card
{
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap:
        clamp(
            1.5rem,
            4vw,
            3rem
        );

    padding:
        clamp(
            1.5rem,
            4vw,
            2.2rem
        );

    background:
        linear-gradient(
            135deg,
            var(--trig-teal-soft),
            var(--trig-blue-soft)
        );

    border:
        1px solid
        rgba(
            13,
            148,
            136,
            0.22
        );

    border-radius: 1.25rem;
}

.trig-method-copy h2
{
    margin-bottom: 0.8rem;

    color: var(--trig-navy);

    font-size:
        clamp(
            1.5rem,
            3vw,
            2rem
        );

    font-weight: 800;

    letter-spacing: -0.03em;

    line-height: 1.2;
}

.trig-method-copy > p:not(.trig-hub-eyebrow)
{
    margin: 0;

    color: var(--trig-slate);

    line-height: 1.75;
}

.trig-method-steps
{
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 0.85rem;
}

.trig-method-step
{
    display: flex;

    gap: 0.75rem;

    align-items: flex-start;

    min-width: 0;

    padding: 1rem;

    background:
        rgba(
            255,
            255,
            255,
            0.82
        );

    border:
        1px solid
        rgba(
            148,
            163,
            184,
            0.24
        );

    border-radius: 0.9rem;
}

.trig-method-step > span
{
    display: grid;

    flex:
        0
        0
        2rem;

    width: 2rem;
    height: 2rem;

    place-items: center;

    color: var(--trig-white);

    font-size: 0.75rem;
    font-weight: 800;

    background: var(--trig-teal);

    border-radius: 50%;
}

.trig-method-step h3
{
    margin:
        0
        0
        0.3rem;

    color: var(--trig-navy);

    font-size: 0.9rem;
    font-weight: 800;
}

.trig-method-step p
{
    margin: 0;

    color: var(--trig-slate);

    font-size: 0.82rem;

    line-height: 1.55;
}


/* =========================================================
   FAQ SECTION
   ========================================================= */

.trig-faq-section
{
    padding:
        clamp(
            4.5rem,
            8vw,
            6.5rem
        )
        0;

    background: var(--trig-white);
}

.trig-faq-card
{
    position: relative;

    padding: 1.35rem;
}

.trig-faq-icon
{
    display: grid;

    width: 2.65rem;
    height: 2.65rem;

    margin-bottom: 0.85rem;

    place-items: center;

    color: var(--trig-teal);

    background: var(--trig-teal-soft);

    border-radius: 0.8rem;
}

.trig-faq-card h3
{
    font-size: 1rem;
}

.trig-faq-card p
{
    font-size: 0.9rem;

    line-height: 1.7;
}


/* =========================================================
   CONTACT INCLUDE SPACING
   ========================================================= */

.trig-contact-wrapper
{
    padding:
        clamp(
            1rem,
            3vw,
            2rem
        )
        0
        clamp(
            4rem,
            7vw,
            5.5rem
        );

    background: var(--trig-white);
}


/* =========================================================
   LOWER HALF RESPONSIVE
   ========================================================= */

@media (max-width: 991.98px)
{
    .trig-struggle-grid
    {
        grid-template-columns: 1fr;
    }

    .trig-method-card
    {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 767.98px)
{
    .trig-struggle-section,
    .trig-faq-section
    {
        padding:
            4rem
            0;
    }

    .trig-method-card
    {
        padding: 1.15rem;

        border-radius: 1rem;
    }

    .trig-method-steps
    {
        grid-template-columns: 1fr;
    }

    .trig-struggle-card,
    .trig-faq-card
    {
        padding: 1.05rem;
    }
}