/* ============================================================
   HABIB EDUCATION — University detail page styles
   ============================================================ */
/* ---- university header ---- */
.uni-hero{background:var(--gradient-teal); color:#fff; padding:54px 0 0; position:relative; overflow:hidden;}
.uni-hero::before{content:""; position:absolute; inset:0; opacity:.14; background-image:radial-gradient(circle at 16% 26%,#fff 0 1px,transparent 1px); background-size:24px 24px;}
.uni-hero.has-banner{background:linear-gradient(rgba(8,78,90,.82),rgba(8,78,90,.88)),var(--uni-banner,none); background-size:cover; background-position:center;}
.uni-hero .wrap{position:relative; z-index:2;}
.uni-hero .crumb{font-family:var(--font-head); font-weight:500; font-size:14px; color:#CFEDED; display:flex; gap:8px; align-items:center;}
.uni-hero .crumb a:hover{color:#fff;}
.uni-head{display:flex; align-items:center; gap:24px; margin-top:22px; flex-wrap:wrap;}
.uni-head .ulogo{width:96px;height:96px;border-radius:22px; background:#fff; display:grid; place-items:center; font-family:var(--font-head); font-weight:800; font-size:32px; color:var(--brand); box-shadow:var(--sh-lg); flex:none;}
.uni-head h1{color:#fff; font-size:42px;}
.uni-head .meta{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
.uni-head .meta .badge{background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.25);}
.uni-intro{color:#E4F1F1; font-size:18px; max-width:760px; margin-top:22px; line-height:1.65;}
.uni-gallery{display:grid; grid-template-columns:2fr 1fr 1fr; gap:12px; margin-top:34px; height:200px;}
.uni-gallery .photo{border-radius:var(--r-md) var(--r-md) 0 0;}
.uni-gallery .photo:first-child{grid-row:span 1;}
/* tabs sticky under header */
.uni-tabs-bar{position:sticky; top:74px; z-index:100; background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--sh-sm);}
.uni-tabs-bar .tabs{margin:0; border:none; max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.tab-h2{font-size:30px;}
.tab-p{font-size:17px;}
/* ---- Jurusan / programs ---- */
.faculty-select{display:flex; align-items:center; gap:16px; margin-bottom:26px; flex-wrap:wrap;}
.faculty-select label{font-family:var(--font-head); font-weight:600; font-size:15px; color:var(--ink-2);}
.faculty-select select{min-width:340px; max-width:100%; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--r-md); font-family:var(--font-body); font-size:16px; color:var(--ink); background:#fff;}
.faculty-select select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--teal-50);}
.prog-count{color:var(--slate); font-size:15px; font-family:var(--font-head);}
.fac-note{display:flex; gap:10px; align-items:flex-start; background:var(--teal-50); border-radius:var(--r-md); padding:14px 18px; color:var(--brand); font-size:14.5px; margin-top:22px;}
.fac-note svg{width:18px;height:18px;flex:none;margin-top:2px;}
/* ---- Accommodation (Agoda style) ---- */
.accom-filter{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:10px 14px; margin-bottom:26px; box-shadow:var(--sh-sm);}
.accom-filter .fl{display:flex; align-items:center; gap:8px;}
.accom-filter .chip{font-family:var(--font-head); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:var(--r-pill); border:1.5px solid var(--line); color:var(--slate); transition:.15s; background:#fff;}
.accom-filter .chip:hover{border-color:var(--brand); color:var(--brand);}
.accom-filter .chip.on{background:var(--brand); color:#fff; border-color:var(--brand);}
.accom-filter .sep{width:1px;height:24px;background:var(--line);}
.accom-filter-select{font-family:var(--font-head); font-weight:600; font-size:13.5px; padding:8px 30px 8px 14px; border-radius:var(--r-pill); border:1.5px solid var(--line); color:var(--ink); background-color:#fff; cursor:pointer; transition:.15s; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:14px;}
.accom-filter-select:hover{border-color:var(--brand); color:var(--brand);}
.accom-filter-select:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--teal-50);}
.campus-filter{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; margin-bottom:16px; box-shadow:var(--sh-sm);}
.campus-filter-title{font-family:var(--font-head); font-weight:700; font-size:14px; color:var(--ink); margin-bottom:10px;}
.campus-filter-pills{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.campus-pill{font-family:var(--font-head); font-weight:600; font-size:13.5px; padding:8px 16px; border-radius:var(--r-pill); border:1.5px solid var(--line); color:var(--slate); transition:.15s; background:#fff;}
.campus-pill:hover{border-color:var(--brand); color:var(--brand);}
.campus-pill.on{background:var(--brand); color:#fff; border-color:var(--brand);}
.accom-group-title{display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:700; font-size:22px; margin:34px 0 18px; color:var(--ink);}
.accom-group-title .tag{font-size:13px; font-weight:600; color:var(--brand); background:var(--teal-50); padding:5px 12px; border-radius:var(--r-pill);}
.accom-card{display:grid; grid-template-columns:360px 1fr; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:.22s; margin-bottom:16px;}
.accom-card:hover{box-shadow:var(--sh-lg); border-color:var(--teal-100);}
.accom-card .ac-photo{position:relative; min-height:170px;}
.accom-card .ac-save{position:absolute; top:12px; left:12px; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:var(--sh-sm); z-index:3; transition:.15s;}
.accom-card .ac-save svg{width:19px;height:19px; fill:none; stroke:var(--coral); stroke-width:2;}
.accom-card .ac-save.saved svg{fill:var(--coral);}
.accom-card .ac-save:hover{transform:scale(1.1);}
.accom-card .ac-body{display:flex; flex-direction:column; gap:9px; padding:16px 24px; justify-content:center;}
/* thin divider between each titled section, so the card reads as clearly separated
   blocks (name/address, Property Type + Unit Types, Distance + Facilities, Room Types)
   instead of one loose stack. */
.accom-card .ac-body > div:not(:first-child){border-top:1px solid var(--line-2); padding-top:9px;}
.accom-card h4{font-size:22px; color:var(--ink); line-height:1.2;}
.accom-card .ac-loc{color:var(--slate); font-size:14px; display:flex; align-items:center; gap:6px; margin-top:2px;}
.accom-card .ac-caption{font-size:13px; font-weight:700; color:var(--slate); text-transform:uppercase; letter-spacing:.3px; margin-bottom:5px;}
.accom-card .ac-badges{display:flex; gap:8px; flex-wrap:wrap;}
.accom-card .ac-badges .badge{font-size:14px;}
/* Property Type / Unit Types, and Distance / Facilities: each pair sits side by side
   (2 columns) instead of stacking as separate full-width rows — keeps the card from
   growing tall with mostly-empty width on the right. */
.accom-card .ac-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px;}
/* Travel Time flows inline and wraps like Facilities, so the card stays short in the
   common case. When Facilities wraps to a 2nd line (a long facility name pushed it down),
   university.js adds .wrap2 here so Travel Time also shows on 2 lines (2 items, then 1) —
   keeps the two columns visually balanced instead of one being much shorter than the other. */
.accom-card .ac-travel{display:flex; flex-wrap:wrap; gap:8px 20px; color:var(--slate); font-size:14.5px;}
.accom-card .ac-travel span{display:flex; align-items:center; gap:7px;}
.accom-card .ac-travel svg{width:17px;height:17px;flex:none;}
.accom-card .ac-travel.wrap2{display:grid; grid-template-columns:repeat(2,auto); column-gap:20px; row-gap:8px; justify-content:start;}
.accom-card .ac-feat{display:flex; gap:14px; margin-top:0; color:var(--slate); font-size:14.5px; flex-wrap:wrap;}
.accom-card .ac-feat span{display:flex; align-items:center; gap:6px;}
.accom-card .ac-feat svg{width:16px;height:16px;}
/* Room Types & Price as boxes side by side — padding/gap tightened further (font sizes
   left untouched) so up to 4 typical short entries (Single/Twin/Triple/Quad, 1BR/2BR/3BR/4BR,
   etc.) fit on one row; only wraps to a further row once there are more than 4, or the
   card is too narrow. Label and price are sized close together (both bold) so the price
   stands out via color/weight, not by dwarfing its own label. */
.accom-card .ac-room-prices{display:flex; flex-wrap:wrap; gap:6px;}
.accom-card .ac-room-prices .row{display:flex; align-items:center; gap:4px; padding:6px 10px; background:var(--bg-soft); border-radius:var(--r-md); white-space:nowrap;}
.accom-card .ac-room-prices .row span{font-size:14.5px; color:var(--ink-2); font-weight:700;}
.accom-card .ac-room-prices .row b{font-weight:800; color:var(--brand); font-size:17px;}
.accom-empty{text-align:center; color:var(--slate); padding:40px; font-family:var(--font-head);}
/* ---- Jadwal / intake ---- */
.intake-pills{display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 24px;}
.intake-pill{display:flex; flex-direction:column; align-items:center; gap:4px; padding:22px 34px; border-radius:var(--r-lg); border:1.5px solid var(--line); background:#fff; transition:.18s; min-width:130px;}
.intake-pill:hover{border-color:var(--brand); box-shadow:var(--sh-md); transform:translateY(-3px);}
.intake-pill b{font-family:var(--font-head); font-weight:700; font-size:22px; color:var(--ink);}
.intake-pill small{color:var(--brand); font-family:var(--font-head); font-weight:600; font-size:13px;}
.intake-pill .mn{width:40px;height:40px;border-radius:11px;background:var(--teal-50);color:var(--brand);display:grid;place-items:center;margin-bottom:6px;}
.intake-pill .mn svg{width:20px;height:20px;}
.disclaimer{display:flex; gap:10px; align-items:flex-start; background:var(--amber-soft); border-radius:var(--r-md); padding:15px 18px; color:#8a5e16; font-size:14.5px; max-width:600px;}
.disclaimer svg{width:18px;height:18px;flex:none;margin-top:2px;}
/* ---- Persyaratan / requirements ---- */
.req-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.req-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:30px 30px 14px; box-shadow:var(--sh-sm);}
.req-card .req-head{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
.req-card .req-ic{width:48px;height:48px;border-radius:13px; display:grid; place-items:center;}
.req-card .req-ic svg{width:24px;height:24px;}
.req-card.offer .req-ic{background:var(--teal-50); color:var(--brand);}
.req-card.visa .req-ic{background:var(--blue-soft); color:var(--blue);}
.req-card h3{font-size:21px;}
.req-card .req-sub{color:var(--slate); font-size:13.5px; font-family:var(--font-head); font-weight:500;}
.req-list{list-style:none; padding:0; margin:0;}
.req-list li{display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2);}
.req-list li:last-child{border:none;}
.req-list .num{width:28px;height:28px;border-radius:8px; flex:none; display:grid; place-items:center; font-family:var(--font-head); font-weight:700; font-size:13px;}
.req-card.offer .num{background:var(--teal-50); color:var(--brand);}
.req-card.visa .num{background:var(--blue-soft); color:var(--blue);}
.req-list .rtext{color:var(--ink-2); font-size:15.5px; line-height:1.5;}
.req-list .check{width:22px;height:22px;flex:none;margin-top:1px;}
.req-list .check svg{width:22px;height:22px;}
/* ---- clickable program link ---- */
.prog-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--font-body);
  font-weight:600; font-size:16px; color:var(--brand); text-align:left;
  cursor:pointer; padding:0; transition:.15s; line-height:1.35;
}
.prog-link svg{opacity:0; transform:translateX(-4px); transition:.18s; color:var(--brand);}
.prog-link:hover{color:var(--coral); text-decoration:underline;}
.prog-link:hover svg{opacity:1; transform:none; color:var(--coral);}
/* ---- wide syllabus modal ---- */
.modal.modal-wide{max-width:680px;}
.prog-banner-txt{position:absolute; left:30px; bottom:14px; z-index:3;}
.syl-head{font-family:var(--font-head); font-size:18px; margin:26px 0 12px; color:var(--ink); display:flex; align-items:center; gap:9px;}
.syl-head::before{content:""; width:4px; height:18px; background:var(--brand); border-radius:2px;}
.syl-table-wrap{border:1px solid var(--line); border-radius:var(--r-md); overflow-x:auto; -webkit-overflow-scrolling:touch;}
.syl-table{width:100%; border-collapse:collapse; font-size:14.5px; table-layout:fixed;}
.syl-table th{background:var(--bg-soft); color:var(--ink-2); text-align:left; font-family:var(--font-head); font-weight:600; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; padding:11px 14px; border-bottom:1px solid var(--line);}
.syl-table td{padding:14px; border-bottom:1px solid var(--line-2); vertical-align:top; overflow-wrap:break-word; word-break:break-word;}
.syl-table tr:last-child td{border-bottom:none;}
.syl-table .syl-yr{white-space:nowrap; width:78px;}
.syl-table .syl-yr b{font-family:var(--font-head); color:var(--brand); font-size:14.5px;}
.syl-table .syl-phase{width:150px; color:var(--ink); font-family:var(--font-head); font-weight:600; font-size:13.5px;}
.syl-mods{display:flex; flex-wrap:wrap; gap:6px; min-width:0;}
.syl-mod{display:inline-block; background:var(--teal-50); color:var(--brand); font-family:var(--font-head); font-weight:500; font-size:12.5px; padding:4px 10px; border-radius:var(--r-pill); overflow-wrap:break-word; word-break:break-word; max-width:100%;}
.syl-note{display:flex; gap:8px; align-items:flex-start; color:var(--slate); font-size:13px; margin-top:14px; line-height:1.5;}
/* ---- fee tables (inside program modal) ---- */
.fee-tables{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:22px 0 4px;}
.fee-table{border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; font-size:14.5px;}
.fee-table-head{background:var(--brand); color:#fff; font-family:var(--font-head); font-weight:700; font-size:13.5px; padding:11px 16px; letter-spacing:.02em;}
.fee-table table{width:100%; border-collapse:collapse;}
.fee-table .fee-row td{padding:11px 16px; border-bottom:1px solid var(--line-2); color:var(--ink-2);}
.fee-table .fee-row:last-of-type td{border-bottom:1px solid var(--line);}
.fee-table .fee-lbl{text-align:left;}
.fee-table .fee-amt{text-align:right; font-family:var(--font-head); font-weight:600; color:var(--ink); white-space:nowrap;}
.fee-table .fee-total td{padding:11px 16px; background:var(--teal-50); font-family:var(--font-head); font-weight:700; color:var(--brand); border:none;}
.fee-table .fee-total .fee-amt{color:var(--brand);}
@media(max-width:560px){
  .fee-tables{grid-template-columns:1fr;}
}
/* ---- accommodation image nav & lightbox ---- */
.ac-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  background:rgba(0,0,0,.45); color:#fff; border:none; border-radius:50%;
  width:32px; height:32px; display:grid; place-items:center;
  font-size:22px; line-height:1; cursor:pointer; transition:background .15s;
}
.ac-nav:hover{background:rgba(0,0,0,.72);}
.ac-nav-prev{left:8px;}
.ac-nav-next{right:8px;}
.ac-img-count{
  position:absolute; bottom:10px; right:10px; z-index:4;
  background:rgba(0,0,0,.5); color:#fff; font-size:12px;
  padding:3px 9px; border-radius:var(--r-pill); pointer-events:none;
  font-family:var(--font-head); font-weight:500;
}
.accom-lb{
  display:none; position:fixed; inset:0; z-index:9900;
  background:rgba(0,0,0,.92); align-items:center; justify-content:center;
}
.accom-lb.open{display:flex;}
.lb-img{
  max-width:90vw; max-height:85vh; border-radius:8px;
  object-fit:contain; box-shadow:0 8px 40px rgba(0,0,0,.6);
  user-select:none; display:block;
}
.lb-close{
  position:absolute; top:18px; right:20px;
  background:rgba(255,255,255,.12); border:none; color:#fff;
  width:42px; height:42px; border-radius:50%; font-size:24px;
  cursor:pointer; display:grid; place-items:center; line-height:1; transition:background .15s;
}
.lb-close:hover{background:rgba(255,255,255,.28);}
.lb-prev,.lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:none; color:#fff;
  width:50px; height:50px; border-radius:50%; font-size:32px;
  cursor:pointer; display:grid; place-items:center; line-height:1; transition:background .15s;
}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.28);}
.lb-prev{left:18px;}
.lb-next{right:18px;}
.lb-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.7); font-size:14px; font-family:var(--font-head); font-weight:500;
}
@media(max-width:560px){
  .syl-table .syl-phase{display:none;}
  .syl-table .syl-yr{width:auto;}
  /* make syllabus and fee tables scroll horizontally */
  .syl-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; overflow-y:hidden;}
  .fee-table{overflow-x:auto; -webkit-overflow-scrolling:touch; overflow-y:hidden;}
  .fee-tables{gap:12px;}
}
@media(max-width:860px){
  .uni-gallery{grid-template-columns:1fr 1fr; height:auto; grid-auto-rows:120px;}
  .req-grid{grid-template-columns:1fr;}
  .accom-card{grid-template-columns:1fr;}
  .accom-card .ac-photo{min-height:200px;}
  .uni-head h1{font-size:32px;}
}
@media(max-width:640px){
  .uni-hero{padding:30px 0 0;}
  .uni-head{gap:14px; margin-top:16px;}
  .uni-head .ulogo{width:72px;height:72px;border-radius:16px;font-size:22px;}
  .uni-head h1{font-size:24px;}
  .uni-head .meta{gap:6px; margin-top:8px;}
  .uni-intro{font-size:16px; margin-top:16px;}
  .uni-gallery{grid-template-columns:1fr 1fr; grid-auto-rows:80px;}
  .uni-tabs-bar .tabs{padding:0 14px; gap:2px;}
  .tab{font-size:14px; padding:12px 14px;}
  .tab-h2{font-size:22px;}
  .tab-p{font-size:14.5px;}
  .faculty-select{flex-direction:column; align-items:stretch; gap:10px;}
  .faculty-select select{min-width:0; width:100%;}
  .intake-pills{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
  .intake-pill{padding:16px 10px; min-width:0; flex:none; width:auto;}
  .intake-pill b{font-size:17px;}
  .intake-pill small{font-size:11.5px;}
  .intake-pill .mn{width:32px;height:32px;border-radius:9px;}
  .disclaimer{font-size:13px; padding:13px 15px;}
  .modal.modal-wide{max-width:calc(100vw - 20px);}
  /* accommodation filter: stack type/price groups instead of cramming inline */
  .accom-filter{flex-direction:column; align-items:stretch; padding:12px 14px; gap:10px; border-radius:var(--r-md);}
  .accom-filter .fl{flex-wrap:wrap; gap:6px;}
  .accom-filter .fl > span:first-child{width:100%; margin-bottom:2px;}
  .accom-filter .chip{font-size:12px; padding:6px 10px;}
  .accom-filter-select{font-size:12px; padding:7px 26px 7px 12px; flex:1;}
  .accom-filter .sep{display:none;}
  .campus-filter{padding:12px 14px;}
  .campus-pill{font-size:12px; padding:6px 12px;}
  .accom-group-title{font-size:17px; margin:22px 0 12px;}
  /* accommodation card: tighter type scale */
  .accom-card h4{font-size:19px;}
  .accom-card .ac-loc{font-size:14px;}
  .accom-card .ac-badges .badge{font-size:13px;}
  .accom-card .ac-info-grid{grid-template-columns:1fr; gap:10px;}
  .accom-card .ac-travel{font-size:13.5px; gap:8px 16px;}
  .accom-card .ac-travel.wrap2{column-gap:16px; row-gap:8px;}
  .accom-card .ac-feat{font-size:13.5px; gap:12px;}
  .accom-card .ac-room-prices .row{padding:7px 12px;}
  .accom-card .ac-room-prices .row span{font-size:13px;}
  .accom-card .ac-room-prices .row b{font-size:15.5px;}
}
@media(max-width:380px){
  .intake-pill b{font-size:15px;}
  .intake-pill small{font-size:10.5px;}
  .intake-pill .mn{width:28px;height:28px;}
  .intake-pill .mn svg{width:16px;height:16px;}
}