/* TIBA landing — navy panel (shield colour) + the whole school photo
   Fonts: Poppins / Montserrat / Courgette — accent red #d61c22 */
:root{
    --navy:#1c2a5e;
    --navy-deep:#121b40;
    --red:#d61c22;
    --glass:rgba(255,255,255,.07);
    --glass-hover:rgba(214,28,34,.92);
    --line:rgba(255,255,255,.16);
    --photo-ratio:1.5;          /* set from the real photo in index.php */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:Montserrat,Arial,sans-serif;color:#fff;background:var(--navy-deep)}

.landing{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:var(--navy-deep)}

/* ---------- Photo: always the whole image, full height, on the right ---------- */
.landing__photo{
    position:absolute;top:0;right:0;height:100%;margin:0;
    aspect-ratio:var(--photo-ratio);
    animation:fadeIn 1.2s ease both;
}
.landing__photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Navy panel: fills the rest of the width ---------- */
.landing__panel{
    position:relative;z-index:2;min-height:100vh;min-height:100svh;
    width:max(460px, calc(100% - 100vh * var(--photo-ratio)));
    width:max(460px, calc(100% - 100svh * var(--photo-ratio)));
    display:flex;flex-direction:column;
    background:linear-gradient(165deg,var(--navy) 0%,var(--navy-deep) 100%);
}
/* soft blend from the panel into the photo — no hard edge */
.landing__panel::after{
    content:"";position:absolute;top:0;bottom:0;left:100%;width:120px;pointer-events:none;
    background:linear-gradient(to right,var(--navy-deep) 0%,rgba(18,27,64,.55) 45%,transparent 100%);
}
/* thin red line on the far left, like the template's accent */
.landing__panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}

.landing__inner{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:100%;max-width:520px;margin:0 auto;padding:48px 32px 24px;text-align:center;
}

.landing__logo{width:110px;height:auto;margin-bottom:20px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
    animation:fadeDown .9s ease both}

.landing__welcome{font-family:Courgette,cursive;font-size:26px;color:#fff;opacity:.9;
    animation:fadeDown .9s .15s ease both}

.landing__title{display:flex;flex-direction:column;align-items:center;line-height:1;margin-top:8px}
.landing__tiba{
    font-family:Poppins,sans-serif;font-weight:700;
    font-size:clamp(56px,7vw,104px);letter-spacing:.16em;margin-right:-.16em; /* keep optically centred */
    animation:fadeUp 1s .3s ease both;
}
.landing__sub{
    font-family:Poppins,sans-serif;font-weight:300;text-transform:uppercase;
    font-size:clamp(14px,1.5vw,20px);letter-spacing:.38em;margin-right:-.38em;margin-top:14px;opacity:.92;
    animation:fadeUp 1s .45s ease both;
}
.landing__rule{display:block;width:72px;height:3px;border-radius:3px;background:var(--red);margin:28px 0 36px;
    animation:grow .8s .7s ease both}

/* ---------- Division buttons (stacked) ---------- */
.divisions{display:grid;grid-template-columns:1fr;gap:16px;width:100%;max-width:420px}

.division{
    display:flex;align-items:center;gap:18px;text-decoration:none;color:#fff;
    padding:20px 22px;border-radius:14px;
    background:var(--glass);border:1px solid var(--line);
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    transition:transform .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
    animation:fadeUp .9s ease both;
}
.division:nth-child(1){animation-delay:.85s}
.division:nth-child(2){animation-delay:1s}
.division:hover,.division:focus-visible{
    transform:translateX(6px);background:var(--glass-hover);border-color:transparent;
    box-shadow:0 16px 36px rgba(214,28,34,.35);outline:none;
}
.division:focus-visible{box-shadow:0 0 0 3px #fff,0 16px 36px rgba(214,28,34,.35)}

.division__icon{
    flex:0 0 54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#fff;color:var(--red);transition:transform .35s ease;
}
.division:hover .division__icon{transform:rotate(-8deg) scale(1.06)}

.division__text{flex:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;min-width:0}
.division__name{font-family:Poppins,sans-serif;font-weight:500;font-size:18px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.division__ar{font-family:Cairo,sans-serif;font-weight:600;font-size:15px;opacity:.85;margin-top:4px}

.division__go{display:flex;opacity:.7;transition:transform .35s ease,opacity .35s ease}
.division:hover .division__go{transform:translateX(6px);opacity:1}

/* ---------- Footer ---------- */
.landing__foot{
    display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;
    padding:18px 24px;font-size:12.5px;color:rgba(255,255,255,.6);text-align:center;
    border-top:1px solid rgba(255,255,255,.08);
}
.landing__foot a{color:#fff;display:flex}
.landing__foot a:hover{color:var(--red)}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- Phones / tablets in portrait: photo on top (whole), panel below ---------- */
@media (max-width:900px), (max-aspect-ratio:1/1){
    .landing__photo{position:relative;width:100%;height:auto;right:auto}
    .landing__panel{width:100%;min-height:0}
    .landing__panel::before{left:0;right:0;top:0;bottom:auto;width:auto;height:4px}
    .landing__panel::after{left:0;right:0;top:auto;bottom:100%;width:auto;height:80px;
        background:linear-gradient(to top,var(--navy) 0%,rgba(28,42,94,.5) 45%,transparent 100%)}
    .landing__inner{padding:28px 20px 20px;max-width:560px}
    .landing__logo{width:84px;margin-bottom:14px}
    .landing__welcome{font-size:21px}
    .landing__rule{margin:22px 0 26px}
    .division{padding:16px 18px}
    .division__icon{flex-basis:46px;height:46px}
    .division__name{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
}