/* ================= DIPW — premium listing + detail design ================= */
:root{
  --dv-navy:#0d2e4a; --dv-navy2:#14526b; --dv-teal:#22b0a3; --dv-cyan:#37c3d1;
  --dv-ink:#17293a; --dv-muted:#5f7183; --dv-line:#e7edf2; --dv-mist:#f4f7fa;
}
.dip-wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- HERO ---------- */
.dip-hero{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(135deg,#0b2740 0%,#123f57 55%,#155f74 100%);
  padding:120px 0 58px; }
.dip-hero::before{ content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px); background-size:22px 22px; }
.dip-hero::after{ content:""; position:absolute; width:460px; height:460px; border-radius:50%;
  inset-inline-start:-140px; top:-190px; pointer-events:none;
  background:radial-gradient(circle, rgba(55,195,209,.34), transparent 62%); }
.dip-hero .dip-wrap{ position:relative; z-index:2; }
.dip-crumb{ font-size:13px; color:#a9c6d8; margin-bottom:16px; }
.dip-crumb a{ color:#a9c6d8 !important; text-decoration:none; }
.dip-crumb a:hover{ color:#fff !important; }
.dip-crumb .breadcrumb, .dip-crumb ul{ background:none !important; padding:0 !important; margin:0 !important; box-shadow:none; display:flex !important; flex-wrap:wrap; gap:4px; list-style:none; justify-content:flex-start !important; }
.dip-crumb li{ float:none !important; margin:0 !important; width:auto !important; }
.dip-eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#69d3dd; margin-bottom:12px; }
.dip-eyebrow::before{ content:""; width:28px; height:2px; background:var(--dv-cyan); display:inline-block; }
.dip-hero h1{ font-size:38px; font-weight:800; margin:0; line-height:1.18; letter-spacing:-.01em; color:#fff; }
.dip-hero-line{ display:block; width:66px; height:4px; border-radius:4px; margin-top:18px; background:linear-gradient(90deg,var(--dv-teal),var(--dv-cyan)); }

/* ---------- LIST WRAP + GRID ---------- */
.dip-list{ background:var(--dv-mist); padding:44px 0 70px; }
.dip-grid{ display:grid; gap:22px; }
.dip-grid.cols-3{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
.dip-grid.cols-4{ grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
.dip-grid.cols-books{ grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:22px; }

/* ---------- FILTER BAR ---------- */
.dip-filter{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--dv-line); border-radius:16px; padding:14px 16px; margin-bottom:26px;
  box-shadow:0 10px 30px -22px rgba(13,46,74,.4); }
.dip-searchwrap{ position:relative; flex:1 1 260px; max-width:360px; }
.dip-searchwrap .bi{ position:absolute; inset-inline-start:16px; top:50%; transform:translateY(-50%); color:#98a8b6; font-size:15px; }
.dip-search{ width:100%; padding:11px 44px; border:1px solid var(--dv-line); border-radius:30px; font-size:15px; font-family:inherit; background:#fbfdff; }
.dip-search:focus{ outline:0; border-color:var(--dv-navy2); box-shadow:0 0 0 3px rgba(20,82,107,.12); }
.dip-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dip-chip{ border:1px solid var(--dv-line); background:#fff; color:#455563; border-radius:20px; padding:7px 16px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.dip-chip:hover{ border-color:var(--dv-navy2); color:var(--dv-navy2); }
.dip-chip.active{ background:linear-gradient(135deg,var(--dv-navy),var(--dv-navy2)); color:#fff; border-color:transparent; }

/* ---------- PERSON CARD (trainers / students) ---------- */
.dip-person{ position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:3/4;
  background:#0d2e4a; box-shadow:0 16px 40px -22px rgba(13,46,74,.55); text-decoration:none !important;
  transition:transform .28s ease, box-shadow .28s ease; }
.dip-person:hover{ transform:translateY(-6px); box-shadow:0 30px 54px -24px rgba(13,46,74,.6); }
.dip-person img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; transition:transform .6s ease; }
.dip-person:hover img{ transform:scale(1.07); }
.dip-pscrim{ position:absolute; inset:0; background:linear-gradient(transparent 36%, rgba(8,26,44,.30) 58%, rgba(6,19,32,.95)); }
.dip-pinfo{ position:absolute; inset-inline:0; bottom:0; padding:22px 20px 18px; z-index:2; }
.dip-pinfo h3{ color:#fff; font-size:18px; font-weight:800; margin:0 0 4px; line-height:1.3; }
.dip-pinfo span{ color:#bcd4e4; font-size:12.5px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dip-person::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:4px; z-index:3;
  background:linear-gradient(90deg,var(--dv-teal),var(--dv-cyan)); transform:scaleX(0); transform-origin:center; transition:transform .3s ease; }
.dip-person:hover::after{ transform:scaleX(1); }

/* ---------- BOOK CARD ---------- */
.dip-book{ background:#fff; border-radius:16px; overflow:hidden; border:1px solid #eef2f6;
  box-shadow:0 12px 30px -22px rgba(13,46,74,.42); transition:transform .28s ease, box-shadow .28s ease, border-color .2s; }
.dip-book:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -26px rgba(13,46,74,.55); border-color:#dbe6ee; }
.dip-book .dip-thumb{ aspect-ratio:4/5; overflow:hidden; position:relative;
  background:linear-gradient(180deg,#ffffff 0%,#eef3f7 100%); display:flex; align-items:flex-end; justify-content:center; padding:22px 22px 28px; }
.dip-book .dip-thumb::after{ content:""; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); width:56%; height:13px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(13,46,74,.30), rgba(13,46,74,0) 70%); filter:blur(2px); z-index:0; transition:width .4s ease, opacity .4s ease; }
.dip-book .dip-thumb img{ position:relative; z-index:1; width:auto; max-width:100%; height:100%; object-fit:contain; transition:transform .45s ease; }
.dip-book:hover .dip-thumb img{ transform:translateY(-6px) scale(1.02); }
.dip-book:hover .dip-thumb::after{ width:48%; opacity:.85; }
.dip-book .dip-year{ position:absolute; top:12px; inset-inline-end:12px; z-index:3;
  background:linear-gradient(135deg,#0d2e4a,#14526b); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.03em; padding:5px 12px; border-radius:20px; box-shadow:0 6px 14px -6px rgba(13,46,74,.6); }
.dip-book .dip-body{ padding:16px 14px 18px; text-align:center; }
.dip-book .dip-body h3{ font-size:14.5px; font-weight:800; color:var(--dv-navy); margin:0; line-height:1.5; min-height:2.9em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- PROGRAM CARD ---------- */
.dip-prog{ background:#fff; border-radius:18px; overflow:hidden; border:1px solid #eef2f6; display:block; text-decoration:none !important; color:inherit;
  box-shadow:0 12px 32px -22px rgba(13,46,74,.42); transition:transform .28s ease, box-shadow .28s ease, border-color .2s; }
.dip-prog:hover{ transform:translateY(-6px); box-shadow:0 30px 52px -26px rgba(13,46,74,.55); border-color:#dbe6ee; }
.dip-prog .dip-thumb{ aspect-ratio:16/10; overflow:hidden; }
.dip-prog .dip-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dip-prog:hover .dip-thumb img{ transform:scale(1.06); }
.dip-prog .dip-body{ padding:20px 22px 22px; position:relative; }
.dip-prog .dip-body h3{ font-size:18px; font-weight:800; color:var(--dv-navy); margin:0 0 8px; line-height:1.4; }
.dip-prog .dip-body p{ font-size:14px; color:var(--dv-muted); margin:0; line-height:1.75;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dip-prog .dip-go{ margin-top:14px; display:inline-flex; align-items:center; gap:7px; color:var(--dv-teal); font-weight:700; font-size:14px; }

/* ---------- NEWS CARD (overlay) ---------- */
.dip-news{ position:relative; display:block; border-radius:18px; overflow:hidden; aspect-ratio:16/11;
  background:#0d2e4a; box-shadow:0 16px 40px -24px rgba(13,46,74,.5); text-decoration:none !important;
  transition:transform .28s ease, box-shadow .28s ease; }
.dip-news:hover{ transform:translateY(-6px); box-shadow:0 30px 54px -26px rgba(13,46,74,.58); }
.dip-news img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.dip-news:hover img{ transform:scale(1.06); }
.dip-nscrim{ position:absolute; inset:0; background:linear-gradient(transparent 30%, rgba(8,26,44,.35) 55%, rgba(6,19,32,.94)); }
.dip-ndate{ position:absolute; top:14px; inset-inline-start:14px; z-index:2; background:#fff; color:var(--dv-navy);
  border-radius:12px; padding:8px 12px; text-align:center; line-height:1.05; box-shadow:0 8px 18px rgba(0,0,0,.2); }
.dip-ndate b{ display:block; font-size:20px; font-weight:800; }
.dip-ndate span{ font-size:10.5px; color:var(--dv-muted); font-weight:700; }
.dip-ninfo{ position:absolute; inset-inline:0; bottom:0; padding:22px 20px 18px; z-index:2; }
.dip-ninfo h3{ color:#fff; font-size:16.5px; font-weight:700; margin:0; line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- NEWS ARTICLE (detail) ---------- */
.dip-article{ background:var(--dv-mist); padding:0 0 70px; }
.dip-article-hero{ position:relative; overflow:hidden; color:#fff; padding:120px 0 66px;
  background:linear-gradient(135deg,#0b2740 0%,#123f57 55%,#155f74 100%); }
.dip-article-hero::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.6px); background-size:22px 22px; }
.dip-article-hero .dip-wrap{ position:relative; z-index:2; max-width:940px; }
.dip-article-hero h1{ font-size:32px; font-weight:800; margin:12px 0 0; max-width:900px; line-height:1.35; color:#fff; }
.dip-article-meta{ display:flex; gap:20px; align-items:center; color:#a9c6d8; font-size:14px; margin-top:18px; flex-wrap:wrap; }
.dip-article-meta span{ display:inline-flex; align-items:center; gap:8px; }
.dip-article-meta .bi{ color:var(--dv-cyan); font-size:15px; }
.dip-article-wrap{ max-width:920px; margin:-38px auto 0; padding:0 24px; position:relative; z-index:3; }
.dip-article-img{ border-radius:18px; overflow:hidden; box-shadow:0 26px 60px -28px rgba(0,0,0,.6); background:#fff; }
.dip-article-img img{ width:100%; display:block; max-height:460px; object-fit:cover; object-position:center 25%; }
.dip-article-body{ background:#fff; border-radius:18px; padding:40px 46px; margin-top:24px;
  box-shadow:0 18px 50px -32px rgba(13,46,74,.34); color:#3a4a58; font-size:16.5px; line-height:2.1; }
.dip-article-body p{ margin:0 0 16px; } .dip-article-body p:last-child{ margin-bottom:0; }
.dip-article-body img{ max-width:100%; height:auto; border-radius:10px; }
.dip-back{ display:inline-flex; align-items:center; gap:9px; margin-top:28px; padding:11px 24px; border-radius:30px;
  background:#fff; border:1px solid var(--dv-line); color:var(--dv-navy2); font-weight:700; text-decoration:none; box-shadow:0 8px 22px -16px rgba(13,46,74,.4); transition:.2s; }
.dip-back:hover{ background:var(--dv-navy2); color:#fff; border-color:transparent; }
.dip-back .bi{ font-size:14px; }

/* ---------- FOOTER ---------- */
#footer{ background:linear-gradient(150deg,#0b2740,#123f57) !important; color:#cfe0ec; position:relative; overflow:hidden; }
#footer::after{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; inset-inline-end:-180px; bottom:-260px; background:radial-gradient(circle, rgba(55,195,209,.18), transparent 62%); pointer-events:none; }
.dip-foot{ position:relative; z-index:2; }
.dip-foot-top{ max-width:1180px; margin:0 auto; padding:56px 24px 30px; display:grid; gap:36px; grid-template-columns:1.6fr 1fr 1fr 1.2fr; }
.dip-foot-brand img{ max-height:56px; margin-bottom:16px; }
.dip-foot-brand p{ color:#a9c6d8; font-size:14px; line-height:1.9; margin:0; max-width:34ch; }
.dip-foot h4{ color:#fff; font-size:15px; font-weight:700; margin:0 0 16px; position:relative; padding-bottom:10px; }
.dip-foot h4::after{ content:""; position:absolute; inset-inline-start:0; bottom:0; width:32px; height:2px; background:linear-gradient(90deg,var(--dv-teal),var(--dv-cyan)); }
.dip-foot ul{ list-style:none; margin:0; padding:0; }
.dip-foot ul li{ margin-bottom:11px; }
.dip-foot ul a{ color:#a9c6d8; text-decoration:none; font-size:14px; transition:.18s; display:inline-flex; align-items:center; gap:8px; }
.dip-foot ul a::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--dv-cyan); opacity:.6; flex:none; transition:.18s; }
.dip-foot ul a:hover{ color:#fff; } .dip-foot ul a:hover::before{ opacity:1; transform:scale(1.4); }
.dip-foot-contact div{ display:flex; align-items:flex-start; gap:10px; color:#a9c6d8; font-size:14px; margin-bottom:12px; line-height:1.7; }
.dip-foot-contact .bi{ color:var(--dv-cyan); font-size:16px; margin-top:2px; }
.dip-foot-social{ display:flex; gap:10px; margin-top:6px; }
.dip-foot-social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:17px; transition:.2s; text-decoration:none; }
.dip-foot-social a:hover{ background:var(--dv-teal); border-color:transparent; transform:translateY(-2px); }
.dip-foot-bottom{ border-top:1px solid rgba(255,255,255,.1); }
.dip-foot-bottom .dip-wrap{ padding:18px 24px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.dip-foot-bottom span, .dip-foot-bottom a{ color:#8fabc0; font-size:13px; text-decoration:none; }
.dip-foot-bottom a:hover{ color:#fff; }

@media (max-width:860px){ .dip-foot-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){
  .dip-hero, .dip-article-hero{ padding:96px 0 40px; }
  .dip-hero h1{ font-size:27px; } .dip-article-hero h1{ font-size:24px; }
  .dip-foot-top{ grid-template-columns:1fr; gap:28px; }
}

/* ---- program detail sections ---- */
.dip-pd-sec{margin-top:46px}
.dip-pd-sec .dip-grid{margin-top:0}
.dip-pd-title{font-size:22px;font-weight:800;color:var(--dv-navy);margin:0 0 22px;position:relative;padding-bottom:12px}
.dip-pd-title::after{content:"";position:absolute;bottom:0;inset-inline-start:0;width:52px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--dv-teal),var(--dv-cyan))}
.dip-pd .dip-article-body{margin-bottom:8px}
@media(max-width:600px){.dip-pd-title{font-size:19px}.dip-pd-sec{margin-top:34px}}

/* ---- book author chip ---- */
.dip-book-author{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:11px; padding-top:11px; border-top:1px solid var(--dv-line); }
.dip-book-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:top center; border:2px solid #fff; box-shadow:0 2px 8px rgba(10,39,64,.18); flex:0 0 auto; background:#e7edf2; }
.dip-book-author span{ font-size:12.5px; font-weight:600; color:var(--dv-navy); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:135px; }

/* ---- breadcrumb separator arrow: RTL-aware ---- */
[dir="rtl"] .dip-crumb .icon-icon-next{ display:inline-block; transform:scaleX(-1); }

/* ---- about page ---- */
.dip-about-sec{ background:#fff; padding:54px 0 76px; }
.dip-about-wrap{ max-width:900px; margin:0 auto; padding:0 24px; }
.dip-richtext{ font-size:16px; line-height:2; color:var(--dv-ink); }
.dip-richtext p{ margin:0 0 16px; }
.dip-richtext a{ color:var(--dv-teal); }
.dip-richtext strong{ color:var(--dv-navy); font-weight:700; }
.dip-richtext ul{ margin:2px 0 22px; padding:0; list-style:none; }
.dip-richtext ul li{ position:relative; margin:9px 0; padding-inline-start:22px; line-height:1.9; }
.dip-richtext ul li::before{ content:""; position:absolute; inset-inline-start:0; top:11px; width:7px; height:7px; border-radius:50%; background:linear-gradient(135deg,var(--dv-teal),var(--dv-cyan)); }
/* section titles are authored as a paragraph containing only a <strong> */
.dip-richtext p:has(> strong:only-child){ margin:38px 0 16px; padding-bottom:12px; position:relative; }
.dip-richtext p:has(> strong:only-child) strong{ font-size:21px; font-weight:800; color:var(--dv-navy); }
.dip-richtext p:has(> strong:only-child)::after{ content:""; position:absolute; bottom:0; inset-inline-start:0; width:48px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--dv-teal),var(--dv-cyan)); }
.dip-richtext p:first-child:has(> strong:only-child){ margin-top:0; }
@media(max-width:600px){ .dip-about-sec{ padding:38px 0 56px; } .dip-richtext{ font-size:15px; } .dip-richtext p:has(> strong:only-child) strong{ font-size:18px; } }