@import url('/assets/design-tokens.css?v=20260820-3');

/* ============================================================
   Laman Utama SMK Agama Jerlun — susun atur v2
   Struktur: Hero Solat (fokus tunggal) > Dock Perkhidmatan >
   Aktiviti+Pengumuman (satu sumber) > Hadis > Carian (kecil) >
   Lain-lain (digabung, kecil).
   Guna token sedia ada (--ds-*) — TIDAK mengubah token global,
   fail ini eksklusif untuk laman utama sahaja.
   ============================================================ */

body.ios-home{background:var(--ds-color-bg)}
.ios-home .sitehead{background:var(--ds-appbar-bg)}
.ios-home .sitehead-inner{max-width:1180px;padding:1.05rem 1.5rem 0}
.ios-home .brandrow{gap:1.1rem}
.ios-home .brandrow img.logo{border-radius:10px;box-shadow:0 8px 20px rgba(20,32,31,.08)}
.ios-home nav.tabs{gap:1.25rem}
.ios-home nav.tabs a,.ios-home nav.tabs .nav-dropdown summary{font-size:.78rem}

/* ---------- Hero: pengenalan sekolah ---------- */
.ios-hero{
  position:relative;display:flex;align-items:center;min-height:clamp(500px,42vw,620px);overflow:hidden;
  background-color:#05201d;background-image:linear-gradient(90deg,rgba(5,31,28,.86) 0%,rgba(5,31,28,.68) 31%,rgba(5,31,28,.26) 66%,rgba(5,31,28,.08) 100%),url('/assets/hero-sekolah.jpg');
  background-position:center 48%;background-size:cover;background-repeat:no-repeat;
  color:#fff;padding:4.5rem 1.5rem 4.7rem;
}
.ios-hero-inner{position:relative;max-width:1180px;margin:0 auto}
.ios-hero-top{display:flex;flex-direction:column;align-items:flex-start;gap:.65rem;max-width:760px}
.ios-hero-salam{font:800 .7rem var(--font-mono);letter-spacing:.1em;color:var(--ds-gold-100)}
.ios-hero-top h1{font-family:var(--font-body);font-weight:800;font-size:clamp(2.4rem,4.5vw,4rem);line-height:1.03;color:#fff;letter-spacing:0;margin:0}
.ios-hero-top p{max-width:48ch;font-size:1.03rem;line-height:1.65;color:#dce9e5;margin:.35rem 0 0}

.ios-hero-actions{display:flex;gap:.7rem;margin-top:1.6rem}
.ios-hero-actions a{min-height:44px;display:inline-flex;align-items:center;padding:.7rem 1.3rem;border-radius:8px;font-weight:800;font-size:.85rem;text-decoration:none;border:1px solid rgba(255,255,255,.3);color:#fff;transition:transform .16s ease,background .16s ease}
.ios-hero-actions a:first-child{background:var(--ds-gold-600);border-color:var(--ds-gold-600);color:var(--ds-forest-950)}
.ios-hero-actions a:hover{transform:translateY(-1px)}
.ios-hero-actions a:not(:first-child):hover{background:rgba(255,255,255,.1)}
.ios-hero-actions a:active{transform:translateY(1px) scale(.98)}

/* ---------- Jalur amaran (pengumuman terkini) ---------- */
.ios-home .ios-alert-strip{display:flex;align-items:center;gap:.7rem;max-width:1180px;margin:-1.3rem auto 0;padding:.85rem 1.3rem;border:1px solid var(--ds-gold-600);border-radius:var(--ds-radius-md);background:#fffaf0;color:var(--ink);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease;position:relative;z-index:2}
.ios-home .ios-alert-strip:hover{transform:translateY(-1px);box-shadow:var(--ds-shadow-md)}
.ios-home .ios-alert-mark{display:grid;place-items:center;width:1.7rem;height:1.7rem;flex:0 0 1.7rem;border-radius:6px;background:var(--ds-gold-600);color:var(--ds-forest-950);font:800 .8rem var(--font-mono)}
.ios-home .ios-alert-copy{display:grid;gap:.12rem;min-width:0;flex:1}
.ios-home .ios-alert-copy small{font:700 .6rem var(--font-mono);letter-spacing:.08em;color:var(--ds-color-accent)}
.ios-home .ios-alert-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem}
.ios-home .ios-alert-date{font:600 .65rem var(--font-mono);color:var(--muted);white-space:nowrap}
.ios-home .ios-alert-arrow{color:var(--teal);font-size:1.1rem}
@media(max-width:640px){.ios-home .ios-alert-strip{margin-top:-.9rem;align-items:flex-start}.ios-home .ios-alert-date{display:none}.ios-home .ios-alert-copy strong{white-space:normal}}

/* ---------- Kandungan utama ---------- */
.ios-home-main{max-width:1180px;margin:0 auto;padding:2.4rem 1.5rem 4rem}

.ios-home .ios-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.ios-home .ios-section-heading h2{font-size:clamp(1.1rem,2vw,1.28rem);font-weight:800;color:var(--ink)}
.ios-home .ios-section-lead{margin:.25rem 0 0;color:var(--muted);font-size:.75rem;line-height:1.5;max-width:52ch}
.ios-home .ios-section-meta{color:var(--muted);font-size:.72rem;font-family:var(--font-mono)}
.ios-home .ios-overline{font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--ds-color-accent);display:block;margin-bottom:.2rem}

/* Dock perkhidmatan */
.ios-home .ios-service-dock{margin-bottom:1.6rem}
.ios-home .ios-service-grid{display:grid;grid-template-columns:1.15fr 1.15fr 1fr 1fr;gap:.75rem}
.ios-home .ios-service-item{display:flex;align-items:center;gap:.8rem;min-height:88px;padding:.95rem;border:1px solid var(--line);border-radius:10px;background:#fff;text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.ios-home .ios-service-item.pss{background:var(--plum-soft)}
.ios-home .ios-service-item.dorm{background:#fffdf7}
.ios-home .ios-service-item:hover{transform:translateY(-2px);border-color:var(--teal);box-shadow:0 10px 18px rgba(20,32,31,.08)}
.ios-home .ios-service-item:active{transform:translateY(1px) scale(.99)}
.ios-home .ios-service-item b{display:block;font-size:.82rem;color:var(--ink)}
.ios-home .ios-service-item small{display:block;font-size:.67rem;color:#4e5b57;margin-top:.1rem}
.ios-home .ios-service-item i{margin-left:auto;color:var(--teal);font-style:normal}
.ios-home .ios-service-icon{display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:0 0 2.6rem;border-radius:8px;font:800 .68rem var(--font-mono)}
.ios-home .ios-service-item.pss .ios-service-icon{background:#fff;color:#725716}
.ios-home .ios-service-item.booking .ios-service-icon{background:#d8ece7;color:#075b55}
.ios-home .ios-service-item.calendar .ios-service-icon{background:#f9e6b0;color:#695116}
.ios-home .ios-service-item.dorm .ios-service-icon{background:#f3e3dc;color:#924f34}
@media(max-width:820px){.ios-home .ios-service-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ios-home .ios-service-grid{grid-template-columns:1fr}}

/* Aktiviti + Pengumuman */
.ios-home .ios-primary-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.6rem}
.ios-home .ios-panel{background:#fff;border:1px solid var(--line);border-radius:var(--ds-radius-md);box-shadow:var(--ds-shadow-sm);padding:1.3rem}
.ios-home .ios-panel .notis-item{padding:.9rem 0}
.ios-home .ios-activities .aktiviti-item{padding:.85rem 0}
.ios-home .ios-program-panel{margin-bottom:1.6rem;border-top:3px solid var(--ds-color-accent);padding-top:1.15rem}
.ios-home .ios-program-panel .achievement-list-featured{grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,1fr));align-items:stretch}
.ios-home .ios-program-panel .achievement-list-featured .achievement-card{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:100%}
.ios-home .ios-program-panel .achievement-list-featured .achievement-card:first-child{grid-row:span 2}
.ios-home .ios-program-panel .achievement-list-featured .achievement-card-media{aspect-ratio:16/9;min-height:0}
@media(max-width:820px){.ios-home .ios-primary-grid{grid-template-columns:1fr}}
@media(max-width:820px){.ios-home .ios-program-panel .achievement-list-featured{grid-template-columns:1fr}.ios-home .ios-program-panel .achievement-list-featured .achievement-card:first-child{grid-row:auto}}

/* Carian — kecil, bukan panel penuh */
.ios-search-compact{margin-bottom:1.6rem}
.ios-search-compact h2{font-size:.92rem;font-weight:800;color:var(--ink);margin-bottom:.6rem}
.ios-search-compact .portal-filter input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.7rem .9rem;background:#fff;font:inherit;font-size:.85rem}
.ios-search-compact .portal-filter input:focus{outline:none;border-color:var(--teal)}

/* Lain-lain — digabung, keutamaan rendah, teks lebih kecil */
.ios-secondary-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.85rem}
.ios-secondary-col{background:#fbfaf6;border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.ios-secondary-head h3{font-size:.85rem;font-weight:800;color:var(--ink);margin-top:.15rem}
.ios-secondary-col .ios-overline{font-size:.6rem}
.ios-secondary-col .portal-list,.ios-secondary-col .portal-gallery{margin-top:.6rem;font-size:.78rem}
@media(max-width:900px){.ios-secondary-grid{grid-template-columns:1fr 1fr}.ios-secondary-gallery{grid-column:span 2}}
@media(max-width:560px){.ios-secondary-grid{grid-template-columns:1fr}.ios-secondary-gallery{grid-column:auto}}

.ios-home footer{background:var(--plum-deep)}

/* ---------- Responsif ---------- */
@media(max-width:820px){
  .ios-hero{min-height:500px;padding:3.7rem 1.25rem 4rem;background-position:64% center}
  .ios-home-main{padding:2rem 1.25rem 3.5rem}
}
@media(max-width:560px){
  .ios-home .sitehead-inner{padding:.85rem 1rem 0}
  .ios-hero{min-height:500px;padding:3.4rem 1rem 4.6rem;background-position:65% center;background-image:linear-gradient(90deg,rgba(5,31,28,.84) 0%,rgba(5,31,28,.62) 68%,rgba(5,31,28,.28) 100%),url('/assets/hero-sekolah.jpg')}
  .ios-hero-top h1{font-size:clamp(2.2rem,10vw,3.2rem)}
  .ios-hero-top p{font-size:.94rem}
  .ios-hero-actions{display:grid;grid-template-columns:1fr}
  .ios-hero-actions a{justify-content:center}
  .ios-home-main{padding:1.8rem 1rem 3rem}
}
@media(prefers-reduced-motion:reduce){
  .ios-home .ios-service-item,.ios-hero-actions a,.ios-home .ios-alert-strip{transition:none}
}

/* Fokus kibod */
.ios-hero-actions a:focus-visible,.ios-home .ios-service-item:focus-visible{outline:none;box-shadow:var(--ds-focus-ring)}