/* =========================================================
   BATIK BIRRU 15 — COMPETITION VISUAL THEME
   Each competition page uses its own supplied background.
   Layout stays 3 cards per row and mirrors the homepage style.
========================================================= */

body.competition-olympiad { --theme-main:#a66c38; --theme-dark:#24150d; --theme-accent:#e8b56a; --theme-bg:url("../../../assets/background/olympiad-bg.webp"); }
body.competition-art      { --theme-main:#4f9b45; --theme-dark:#102b16; --theme-accent:#9be564; --theme-bg:url("../../../assets/background/art-bg.webp"); }
body.competition-linguistic{ --theme-main:#b449c7; --theme-dark:#26113a; --theme-accent:#ff9ee9; --theme-bg:url("../../../assets/background/linguistic-bg.webp"); }
body.competition-scout    { --theme-main:#7b59c8; --theme-dark:#17122b; --theme-accent:#c9b4ff; --theme-bg:url("../../../assets/background/scout-bg.webp"); }
body.competition-romansa  { --theme-main:#b95f45; --theme-dark:#321612; --theme-accent:#ffb08d; --theme-bg:url("../../../assets/background/romansa-bg.webp"); }
body.competition-cup      { --theme-main:#4c8fcb; --theme-dark:#10283d; --theme-accent:#a9dbff; --theme-bg:url("../../../assets/background/cup-bg.webp"); }

/* PAGE */
.competition-page,
body[class*="competition-"] { background:#07090a; color:#fff; }

/* HERO — the supplied illustration becomes the visual identity */
body[class*="competition-"] .competition-hero {
    position:relative;
    min-height:620px;
    padding:130px 24px 100px;
    display:flex;
    align-items:center;
    overflow:hidden;
    isolation:isolate;
    background-image:var(--theme-bg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    border-bottom:1px solid rgba(255,255,255,.14);
}

body[class*="competition-"] .competition-hero::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background:
        linear-gradient(90deg, rgba(4,6,8,.88) 0%, rgba(4,6,8,.60) 38%, rgba(4,6,8,.18) 75%, rgba(4,6,8,.30) 100%),
        linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.58));
}

body[class*="competition-"] .competition-hero::after {
    content:"";
    position:absolute;
    inset:auto 0 0;
    height:110px;
    z-index:-1;
    background:linear-gradient(transparent,#07090a);
}

body[class*="competition-"] .competition-hero .competition-container { position:relative; z-index:2; }

body[class*="competition-"] .competition-label {
    border:1px solid color-mix(in srgb, var(--theme-accent) 55%, white 10%);
    background:rgba(0,0,0,.32);
    color:var(--theme-accent);
    box-shadow:0 6px 25px rgba(0,0,0,.20);
    backdrop-filter:blur(7px);
}

body[class*="competition-"] .competition-hero h1 {
    color:#fff;
    max-width:800px;
    text-shadow:4px 5px 0 rgba(0,0,0,.32), 0 15px 45px rgba(0,0,0,.28);
}

body[class*="competition-"] .competition-hero p {
    color:rgba(255,255,255,.90);
    text-shadow:0 2px 12px rgba(0,0,0,.45);
}

body[class*="competition-"] .competition-button {
    background:var(--theme-main);
    border:1px solid rgba(255,255,255,.35);
    box-shadow:0 9px 25px color-mix(in srgb, var(--theme-main) 45%, transparent);
}
body[class*="competition-"] .competition-button:hover { background:var(--theme-accent); color:#111; }
body[class*="competition-"] .text-button { color:#fff; text-shadow:0 2px 8px #000; }
body[class*="competition-"] .text-button:hover { color:var(--theme-accent); }

/* ABOUT — dark glass section, still lets the branch color through */
body[class*="competition-"] .competition-about {
    position:relative;
    padding:90px 24px 120px;
    overflow:hidden;
    background:
        radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--theme-main) 18%, transparent), transparent 32%),
        #080a0b;
}
body[class*="competition-"] .competition-about .section-label,
body[class*="competition-"] .competition-branches .section-label { color:var(--theme-accent); }
body[class*="competition-"] .competition-about h2,
body[class*="competition-"] .competition-branches h2 { color:#fff; }
body[class*="competition-"] .competition-about-content p { color:rgba(255,255,255,.72); }

/* BRANCHES — 3 per row, colorful but elegant */
body[class*="competition-"] .competition-branches {
    position:relative;
    padding:105px 24px 120px;
    overflow:hidden;
    background:
        linear-gradient(rgba(7,9,10,.80),rgba(7,9,10,.92)),
        var(--theme-bg);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
body[class*="competition-"] .competition-branches::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-image:linear-gradient(90deg,rgba(255,255,255,.7) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.7) 1px,transparent 1px);
    background-size:32px 32px;
}
body[class*="competition-"] .competition-branches .competition-container { position:relative; z-index:1; }
body[class*="competition-"] .competition-branches .competition-section-heading { margin-bottom:42px; }
body[class*="competition-"] .competition-branches .branch-grid {
    width:min(1180px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

body[class*="competition-"] .competition-branches .branch-card {
    position:relative;
    min-height:225px;
    padding:24px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.23);
    border-top:2px solid color-mix(in srgb,var(--theme-accent) 65%,white 10%);
    border-radius:6px;
    background:linear-gradient(145deg, color-mix(in srgb,var(--theme-main) 35%, #101214 65%), rgba(10,12,14,.92));
    box-shadow:inset 0 1px rgba(255,255,255,.16),0 12px 30px rgba(0,0,0,.28);
    backdrop-filter:blur(5px);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
body[class*="competition-"] .competition-branches .branch-card::before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 36%,rgba(0,0,0,.15));
}
body[class*="competition-"] .competition-branches .branch-card::after {
    content:"";
    position:absolute;
    width:150px;
    height:150px;
    right:-70px;
    bottom:-80px;
    border-radius:50%;
    background:color-mix(in srgb,var(--theme-accent) 28%,transparent);
    filter:blur(12px);
    pointer-events:none;
}
body[class*="competition-"] .competition-branches .branch-card:hover {
    transform:translateY(-6px);
    border-color:color-mix(in srgb,var(--theme-accent) 70%,white 10%);
    box-shadow:0 18px 38px rgba(0,0,0,.38),0 0 24px color-mix(in srgb,var(--theme-main) 24%,transparent);
}
body[class*="competition-"] .competition-branches .branch-card > * { position:relative; z-index:2; }
body[class*="competition-"] .competition-branches .branch-card > span {
    margin-bottom:16px;
    color:var(--theme-accent);
    font-family:"Minecraft Seven",ui-monospace,monospace;
    font-size:13px;
    text-shadow:2px 2px 0 rgba(0,0,0,.45);
}
body[class*="competition-"] .competition-branches .branch-card h3 {
    margin:0 0 10px;
    color:#fff;
    font-family:"Minecraft Ten",sans-serif;
    font-size:19px;
    text-shadow:2px 3px 0 rgba(0,0,0,.38);
}
body[class*="competition-"] .competition-branches .branch-card p {
    color:rgba(255,255,255,.75);
    font-size:12px;
    line-height:1.65;
}
body[class*="competition-"] .competition-branches .branch-card a {
    color:var(--theme-accent);
    font-family:"Minecraft Seven",ui-monospace,monospace;
    font-size:12px;
    text-shadow:1px 2px 0 rgba(0,0,0,.4);
}
body[class*="competition-"] .competition-branches .branch-card a:hover { color:#fff; }

/* Timeline / documents keep the same dark premium language */
body[class*="competition-"] .competition-timeline,
body[class*="competition-"] .competition-documents { background:#080a0b; color:#fff; }
body[class*="competition-"] .competition-timeline .competition-section-heading h2,
body[class*="competition-"] .competition-documents h2 { color:#fff; }
body[class*="competition-"] .competition-timeline .timeline-item,
body[class*="competition-"] .competition-timeline .timeline-date,
body[class*="competition-"] .competition-timeline .timeline-item > div:last-child { color:rgba(255,255,255,.75); }
body[class*="competition-"] .competition-timeline .timeline-number {
    background:#101315;
    border:2px solid rgba(255,255,255,.18);
    border-radius:4px;
    color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 3px 0 rgba(0,0,0,.45), 0 8px 18px rgba(0,0,0,.22);
}
body[class*="competition-"] .competition-timeline .timeline-date strong,
body[class*="competition-"] .competition-timeline .timeline-item h3 { color:#fff; }
body[class*="competition-"] .competition-timeline .timeline-date span,
body[class*="competition-"] .competition-timeline .timeline-item p { color:rgba(255,255,255,.58); }
body[class*="competition-"] .competition-timeline .timeline-item:not(:last-child)::after {
    background:repeating-linear-gradient(to bottom, var(--theme-accent) 0 8px, transparent 8px 15px);
    opacity:.70;
}

@media (max-width:900px){
    body[class*="competition-"] .competition-branches .branch-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
    body[class*="competition-"] .competition-hero { min-height:560px; padding:110px 20px 80px; background-position:center; }
    body[class*="competition-"] .competition-branches { background-attachment:scroll; padding:80px 20px; }
    body[class*="competition-"] .competition-branches .branch-grid { grid-template-columns:1fr; }
    body[class*="competition-"] .competition-branches .branch-card { min-height:205px; }
}

/* =========================================================
   MINECRAFT FONT SPACING
   Keep the original visual spacing without.
========================================================= */
body[class*="competition-"] .competition-hero h1,
body[class*="competition-"] .competition-section-heading h2,
body[class*="competition-"] .competition-branches .branch-card h3,
body[class*="competition-"] .competition-documents h2,
body[class*="competition-"] .competition-timeline .timeline-item h3 {
    letter-spacing: 2px;
}

/* =========================================================
   FINAL COMPETITION SPACING + CONTACT FIX
   Applies only to the six competition pages.
   No changes to index.php contact section.
========================================================= */

/* HERO -> ABOUT: remove the oversized empty gap */
body[class*="competition-"] .competition-about {
    padding-top: 38px;
    margin-top: 0;
}

/* Keep the about content itself aligned neatly */
body[class*="competition-"] .competition-about-content {
    padding-top: 38px;
}

/* CONTACT: make it match the homepage structure */
body[class*="competition-"] .contact {
    width: 100%;
    margin: 0;
    padding: 60px 24px 55px;
    box-sizing: border-box;
    background:
        linear-gradient(
            180deg,
            rgba(8,8,8,.92),
            rgba(5,5,5,.98)
        );
    color: #fff;
}

body[class*="competition-"] .contact-title {
    width: 100%;
    margin: 0 0 32px;
    padding: 0;
    text-align: center;
    color: #fff;
    font-family: "Minecraft Ten", sans-serif;
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.15;
}

body[class*="competition-"] .contact-grid {
    width: min(1200px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

body[class*="competition-"] .contact-card {
    width: 100%;
    min-height: 145px;
    padding: 24px 18px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,.13);
    border-top: 2px solid color-mix(in srgb, var(--theme-accent) 60%, white 8%);
    border-radius: 4px;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,.055),
        rgba(255,255,255,.018)
    );
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 8px 25px rgba(0,0,0,.20);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body[class*="competition-"] .contact-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--theme-accent) 70%, white 8%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 14px 30px rgba(0,0,0,.30);
}

body[class*="competition-"] .contact-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--theme-accent) 18%, #111 82%);
    border: 1px solid color-mix(in srgb, var(--theme-accent) 35%, transparent);
}

body[class*="competition-"] .contact-card h4 {
    margin: 0 0 7px;
    color: #fff;
    font-family: "Minecraft Ten", sans-serif;
    font-size: 17px;
    line-height: 1.2;
}

body[class*="competition-"] .contact-card a {
    margin: 0;
    color: rgba(255,255,255,.72);
    font-family: "Minecraft Seven", sans-serif;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
}

body[class*="competition-"] .contact-card a:hover {
    color: var(--theme-accent);
}

/* CONTACT -> FOOTER: no artificial outer gap */
body[class*="competition-"] .footer {
    margin-top: 0;
    padding-top: 45px;
}

@media (max-width: 900px) {
    body[class*="competition-"] .contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    body[class*="competition-"] .competition-about {
        padding-top: 35px;
    }

    body[class*="competition-"] .competition-about-content {
        padding-top: 25px;
    }

    body[class*="competition-"] .contact {
        padding: 50px 20px 45px;
    }

    body[class*="competition-"] .contact-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body[class*="competition-"] .contact-card {
        min-height: 130px;
    }
}