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

@media (max-width: 900px) {

    .competition-hero {
        min-height: 500px;

        padding-top: 90px;
        padding-bottom: 75px;
    }

    .competition-hero h1 {
        font-size: clamp(55px, 10vw, 80px);
    }


    /* ABOUT */

    .competition-about .competition-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .competition-about-content {
        padding-top: 0;

        max-width: 800px;
    }


    /* BRANCH */

    .branch-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* DOCUMENT */

    .document-box {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 40px;
    }

    .document-actions {
        display: grid;

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

    .document-button:first-child {
        grid-column: 1 / -1;
    }
}


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

@media (max-width: 700px) {

    .competition-container {
        width: calc(100% - 40px);
    }


    /* HERO */

    .competition-hero {
        min-height: auto;

        padding: 75px 20px 65px;
    }

    .competition-label {
        margin-bottom: 15px;
    }

    .competition-hero h1 {
        font-size: 50px;

        line-height: 0.95;
    }

    .competition-hero p {
        margin-top: 20px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* HERO BUTTON */

    .hero-actions {
        margin-top: 28px;

        flex-direction: column;

        align-items: stretch;

        gap: 15px;
    }

    .competition-button {
        width: 100%;
    }

    .text-button {
        text-align: center;
    }


    /* SECTION */

    .competition-section-heading {
        margin-bottom: 35px;
    }

    .competition-section-heading h2 {
        font-size: 32px;
    }

    .competition-section-heading p {
        font-size: 14px;
    }


    /* ABOUT */

    .competition-about {
        padding: 75px 20px;
    }

    .competition-about .competition-container {
        display: block;
    }

    .competition-about .competition-section-heading {
        margin-bottom: 28px;
    }

    .competition-about-content {
        display: flex;

        flex-direction: column;

        gap: 18px;

        padding-top: 0;
    }

    .competition-about-content p {
        font-size: 14px;
        line-height: 1.85;
    }


    /* BRANCH */

    .competition-branches {
        padding: 75px 20px;
    }

    .branch-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .branch-card {
        min-height: 250px;

        padding: 24px;
    }

    .branch-card h3 {
        font-size: 20px;
    }

    .branch-card p {
        font-size: 13px;
    }


    /* TIMELINE */

    .competition-timeline {
        padding: 75px 20px;
    }

    .competition-timeline .timeline-list {
        width: 100%;
    }

    .competition-timeline .timeline-item {
        grid-template-columns: 48px 1fr;

        gap: 15px;

        min-height: 0;

        padding-bottom: 35px;
    }

    .competition-timeline
    .timeline-item:not(:last-child)::after {

        left: 23px;
        top: 48px;
    }

    .timeline-number {
        width: 48px;
        height: 48px;

        grid-row: 1 / span 2;
    }

    .competition-timeline .timeline-date {
        grid-column: 2;

        padding-top: 0;
    }

    .competition-timeline
    .timeline-item > div:last-child {

        grid-column: 2;

        padding-top: 4px;
    }

    .competition-timeline .timeline-item h3 {
        font-size: 17px;
    }

    .competition-timeline .timeline-item p {
        font-size: 12px;
    }


    /* DOCUMENT */

    .competition-documents {
        padding: 75px 20px;
    }

    .document-box {
        padding: 32px 24px;

        border-radius: 18px;
    }

    .document-box h2 {
        font-size: 32px;
    }

    .document-box p {
        font-size: 13px;
    }

    .document-actions {
        display: flex;

        flex-direction: column;
    }

    .document-button:first-child {
        grid-column: auto;
    }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 480px) {

    .competition-container {
        width: calc(100% - 32px);
    }


    /* HERO */

    .competition-hero {
        padding: 65px 16px 55px;
    }

    .competition-hero h1 {
        font-size: 43px;
    }

    .competition-hero p {
        font-size: 13px;
    }


    /* SECTION */

    .competition-about,
    .competition-branches,
    .competition-timeline,
    .competition-documents {
        padding-left: 16px;
        padding-right: 16px;
    }

    .competition-section-heading h2 {
        font-size: 29px;
    }


    /* CARD */

    .branch-card {
        padding: 22px;

        min-height: 240px;
    }

    .branch-card h3 {
        font-size: 19px;
    }


    /* DOCUMENT */

    .document-box {
        padding: 27px 20px;
    }

    .document-box h2 {
        font-size: 29px;
    }
}

/* =========================================


/* =========================================================
   FINAL TIMELINE ALIGNMENT — SAME AS INDEX
========================================================= */
@media (max-width: 900px) {
    .competition-timeline .timeline-item {
        grid-template-columns: 58px 130px 1fr;
    }
}

@media (max-width: 700px) {
    .competition-about {
        padding-top: 75px;
    }

    .competition-timeline {
        padding: 75px 20px;
    }

    .competition-timeline .timeline-list {
        width: 100%;
    }

    .competition-timeline .timeline-item {
        grid-template-columns: 52px 1fr;
        gap: 15px;
        min-height: 0;
        padding-bottom: 35px;
    }

    .competition-timeline .timeline-item:not(:last-child)::after {
        left: 25px;
        top: 52px;
    }

    .competition-timeline .timeline-number {
        width: 52px;
        height: 52px;
        grid-row: 1 / span 2;
        font-size: 20px;
        border-radius: 4px;
    }

    .competition-timeline .timeline-date {
        grid-column: 2;
        padding-top: 0;
    }

    .competition-timeline .timeline-item > div:last-child {
        grid-column: 2;
        padding-top: 4px;
    }

    .competition-timeline .timeline-date strong {
        font-size: 18px;
    }

    .competition-timeline .timeline-item h3 {
        font-size: 17px;
    }

    .competition-timeline .timeline-item p {
        font-size: 12px;
    }
}

@media (max-width: 700px) {

    .competition-page .contact-section,
    .competition-page .contact-person-section {
        width: min(100% - 30px, 600px);
        margin-top: 60px;
    }

    .competition-page .contact-grid,
    .competition-page .contact-person-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .competition-page .contact-card,
    .competition-page .contact-person-card {
        padding: 20px;
    }

}