/* =========================================================
   PYQ YEAR PAGE
   Scoped only to .pyq-page
   Shared Header / Menu remains untouched
========================================================= */


/* =========================================================
   PAGE RESET
========================================================= */

.pyq-page,
.pyq-page * {

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;
}


.pyq-page h1,
.pyq-page h2,
.pyq-page h3,
.pyq-page p {

    margin-top: 0;

}


/* =========================================================
   MAIN PAGE
========================================================= */

.pyq-page {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 125px 15px 40px;

}


/* =========================================================
   BACK BUTTON
========================================================= */

.back-section {

    width: 100%;

    margin-bottom: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

}


.back-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 9px 15px;

    background: #EAF5FF;

    border: 1px solid #D3E9FF;

    border-radius: 10px;

    color: #1F6FE5;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    transition: 0.25s ease;

}


.back-arrow {

    font-size: 21px;

    line-height: 1;

}


.back-button:hover {

    background: #DCEEFF;

    border-color: #BFDFFF;

    transform: translateX(-3px);

}


/* =========================================================
   HERO
========================================================= */

.pyq-hero {

    background: linear-gradient(
        135deg,
        #EAF5FF,
        #DCEEFF
    );

    border-radius: 24px;

    padding: 40px;

    margin-bottom: 30px;

    overflow: hidden;

}


.pyq-hero-content {

    width: 100%;

}


/* =========================================================
   SMALL LABEL
========================================================= */

.pyq-label {

    display: inline-block;

    background: #D3E9FF;

    color: #1F6FE5;

    padding: 7px 14px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 700;

    margin-bottom: 15px;

}


/* =========================================================
   HERO TITLE
========================================================= */

.pyq-hero h1 {

    font-size: 42px;

    line-height: 1.2;

    font-weight: 800;

    color: #0B1F41;

    margin-bottom: 14px;

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.pyq-hero p {

    font-size: 20px;

    line-height: 1.6;

    color: #536174;

    font-weight: 500;

    max-width: 720px;

    margin-bottom: 0;

}


/* =========================================================
   YEAR SECTION
========================================================= */

.year-section {

    width: 100%;

    margin-top: 5px;

}


/* =========================================================
   SECTION HEADING
========================================================= */

.section-heading {

    text-align: center;

    margin-bottom: 25px;

}


.section-heading h2 {

    font-size: 28px;

    line-height: 1.3;

    color: #0B1F41;

    font-weight: 800;

    margin-bottom: 7px;

}


.section-heading p {

    font-size: 16px;

    color: #64748B;

    line-height: 1.5;

    margin-bottom: 0;

}


/* =========================================================
   YEAR GRID
========================================================= */

.year-grid {

    display: grid;

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

    gap: 18px;

    width: 100%;

}


/* =========================================================
   YEAR CARD
========================================================= */

.year-card {

    position: relative;

    min-height: 150px;

    padding: 25px 25px 22px;

    background: #F5FAFF;

    border: 2px solid #DCEEFF;

    border-radius: 20px;

    text-decoration: none;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

}


/* =========================================================
   DECORATIVE CIRCLE
========================================================= */

.year-card::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: #E7F3FF;

    right: -35px;

    top: -35px;

    transition: 0.25s ease;

}


/* =========================================================
   YEAR NUMBER
========================================================= */

.year-number {

    position: relative;

    z-index: 2;

    font-size: 36px;

    line-height: 1.1;

    font-weight: 800;

    color: #0B1F41;

    margin-bottom: 7px;

}


/* =========================================================
   YEAR SUBTEXT
========================================================= */

.year-text {

    position: relative;

    z-index: 2;

    font-size: 15px;

    color: #64748B;

    font-weight: 500;

}


/* =========================================================
   ARROW
========================================================= */

.year-arrow {

    position: absolute;

    z-index: 2;

    right: 22px;

    bottom: 20px;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background: #1F6FE5;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 23px;

    line-height: 1;

    transition: 0.25s ease;

}


/* =========================================================
   HOVER
========================================================= */

.year-card:hover {

    transform: translateY(-4px);

    background: #EDF7FF;

    border-color: #BFDFFF;

    box-shadow:
        0 8px 20px rgba(31,111,229,0.12);

}


.year-card:hover::before {

    transform: scale(1.3);

    background: #DCEEFF;

}


.year-card:hover .year-arrow {

    transform: translateX(4px);

    background: #155DC4;

}


/* =========================================================
   INFORMATION BOX
========================================================= */

.pyq-info {

    margin-top: 28px;

    padding: 25px;

    background: #F7F9FC;

    border-radius: 20px;

    display: flex;

    align-items: center;

    gap: 18px;

    border: 1px solid #EEF1F5;

}


/* =========================================================
   INFO ICON
========================================================= */

.info-icon {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #DCEEFF;

    color: #1F6FE5;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    font-size: 25px;

    font-weight: 800;

}


/* =========================================================
   INFO TEXT
========================================================= */

.info-content h3 {

    font-size: 18px;

    color: #0B1F41;

    font-weight: 700;

    margin-bottom: 4px;

}


.info-content p {

    font-size: 14px;

    line-height: 1.6;

    color: #64748B;

    margin-bottom: 0;

}


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

@media (max-width: 900px) and (min-width: 769px) {

    .pyq-page {

        padding:
            130px 12px 30px;

    }


    .pyq-hero {

        padding: 35px 30px;

    }


    .pyq-hero h1 {

        font-size: 36px;

    }


    .pyq-hero p {

        font-size: 18px;

    }


    .year-grid {

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

    }

}


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

@media (max-width: 768px) {

    .pyq-page {

        width: 100%;

        margin: 0;

        padding:
            130px 12px 25px;

    }


    /* =====================================================
       BACK BUTTON
    ===================================================== */

    .back-section {

        margin-bottom: 12px;

        display: flex;

        justify-content: center;

        align-items: center;

    }


    .back-button {

        padding: 8px 12px;

        font-size: 13px;

        border-radius: 9px;

    }


    .back-arrow {

        font-size: 19px;

    }


    /* =====================================================
       HERO
    ===================================================== */

    .pyq-hero {

        padding: 28px 20px;

        margin-bottom: 25px;

        border-radius: 22px;

    }


    .pyq-label {

        font-size: 12px;

        padding: 6px 11px;

        margin-bottom: 11px;

    }


    .pyq-hero h1 {

        font-size: 28px;

        line-height: 1.25;

        margin-bottom: 9px;

    }


    .pyq-hero p {

        font-size: 15px;

        line-height: 1.55;

    }


    /* =====================================================
       HEADING
    ===================================================== */

    .section-heading {

        margin-bottom: 18px;

    }


    .section-heading h2 {

        font-size: 23px;

        margin-bottom: 5px;

    }


    .section-heading p {

        font-size: 13px;

        line-height: 1.5;

    }


    /* =====================================================
       YEAR GRID
    ===================================================== */

    .year-grid {

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

        gap: 10px;

    }


    /* =====================================================
       YEAR CARD
    ===================================================== */

    .year-card {

        min-height: 125px;

        padding: 20px 13px 17px;

        border-radius: 17px;

    }


    /* =====================================================
       DECORATION
    ===================================================== */

    .year-card::before {

        width: 75px;

        height: 75px;

        right: -28px;

        top: -28px;

    }


    /* =====================================================
       YEAR
    ===================================================== */

    .year-number {

        font-size: 28px;

        margin-bottom: 5px;

    }


    /* =====================================================
       TEXT
    ===================================================== */

    .year-text {

        font-size: 11px;

        line-height: 1.35;

        max-width: 100px;

    }


    /* =====================================================
       ARROW
    ===================================================== */

    .year-arrow {

        width: 32px;

        height: 32px;

        right: 11px;

        bottom: 11px;

        font-size: 19px;

    }


    /* =====================================================
       INFO
    ===================================================== */

    .pyq-info {

        margin-top: 20px;

        padding: 18px 15px;

        border-radius: 17px;

        gap: 12px;

        align-items: flex-start;

    }


    .info-icon {

        width: 42px;

        height: 42px;

        font-size: 20px;

    }


    .info-content h3 {

        font-size: 15px;

        margin-bottom: 4px;

    }


    .info-content p {

        font-size: 12px;

        line-height: 1.5;

    }

}


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

@media (max-width: 400px) {

    .pyq-page {

        padding:
            130px 20px 20px;

    }


    /* =====================================================
       BACK BUTTON
    ===================================================== */

    .back-button {

        padding: 7px 11px;

        font-size: 12px;

    }


    .back-arrow {

        font-size: 18px;

    }


    /* =====================================================
       HERO
    ===================================================== */

    .pyq-hero {

        padding: 24px 18px;

        border-radius: 20px;

    }


    .pyq-hero h1 {

        font-size: 25px;

    }


    .pyq-hero p {

        font-size: 14px;

    }


    /* =====================================================
       HEADING
    ===================================================== */

    .section-heading h2 {

        font-size: 21px;

    }


    .section-heading p {

        font-size: 12px;

    }


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

    .year-grid {

        gap: 8px;

    }


    /* =====================================================
       YEAR CARD
    ===================================================== */

    .year-card {

        min-height: 115px;

        padding:
            17px 10px 15px;

        border-radius: 16px;

    }


    /* =====================================================
       YEAR
    ===================================================== */

    .year-number {

        font-size: 25px;

    }


    .year-text {

        font-size: 10px;

    }


    /* =====================================================
       ARROW
    ===================================================== */

    .year-arrow {

        width: 29px;

        height: 29px;

        right: 9px;

        bottom: 9px;

        font-size: 17px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 340px) {

    .pyq-page {

        padding:
            130px 10px 20px;

    }


    .pyq-hero h1 {

        font-size: 23px;

    }


    .pyq-hero p {

        font-size: 13px;

    }


    .year-number {

        font-size: 23px;

    }


    .year-text {

        font-size: 9px;

    }

}


/* =========================================================
   SHARED HEADER / MENU
   Do not interfere with external components
========================================================= */

#header-container,
#menu-container {

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

}