/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
File: courses-dubai.css
Purpose: Dubai course page styling.
Maintenance note: Related rules and logic are grouped and documented by feature.
=============================================================
*/

/*
STYLE ORGANIZATION
- Base/component rules define the default desktop presentation.
- State classes such as .active, .show, and :hover control interactions.
- Media queries near the relevant rules adapt the layout for tablet and mobile screens.
*/

/* Dubai courses page — integrated with the finalized Courses design */
.dubai-hero{min-height:650px}
.dubai-hero .about-hero-overlay{background:linear-gradient(90deg,rgba(3,23,65,.95) 0%,rgba(5,49,120,.82) 48%,rgba(2,29,78,.35) 100%)}
.hero-badge img{width:23px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.dubai-overview{padding-bottom:5rem}
.dubai-page-heading,.programs-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2rem;margin-bottom:2.5rem}
.dubai-page-heading .section-subtitle,.programs-heading .section-subtitle{max-width:760px}
.dubai-campus-switch{display:flex;gap:.5rem;padding:.42rem;border:1px solid #d5e2f2;border-radius:16px;background:rgba(255,255,255,.8);box-shadow:0 14px 34px rgba(10,53,120,.08);backdrop-filter:blur(12px)}
.dubai-campus-switch a{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:11px;padding:.76rem 1rem;color:#61708a;font-size:.8rem;font-weight:800;white-space:nowrap;transition:.25s ease}
.dubai-campus-switch a img{width:22px;height:15px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.dubai-campus-switch a:hover,.dubai-campus-switch a.active{background:#fff;color:#0754c5;box-shadow:0 8px 20px rgba(7,65,155,.11)}
.dubai-programs-section{background:#fff}
.program-total{align-self:end;border:1px solid #d8e5f5;border-radius:999px;background:#f4f8ff;padding:.55rem .9rem;color:#0754c5;font-size:.76rem;font-weight:800;white-space:nowrap}
.program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.course-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid #d8e3f1;border-radius:18px;background:#fff;box-shadow:0 12px 34px rgba(10,52,121,.07);transition:.28s ease}
.course-card:hover{transform:translateY(-5px);border-color:#8ab8ef;box-shadow:0 24px 50px rgba(7,84,197,.16)}
.course-image{position:relative;aspect-ratio:16/10;overflow:hidden;background:#edf3fb}
.course-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease}
.course-card:hover .course-image img{transform:scale(1.055)}
.image-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,32,86,.62),transparent 58%)}
.course-badges{position:absolute;inset-inline:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.85rem}
.campus-badge,.level-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.32rem .62rem;font-size:.66rem;font-weight:800;backdrop-filter:blur(8px)}
.campus-badge{background:rgba(255,255,255,.94);color:#0754c5}.level-badge{background:rgba(4,33,87,.78);color:#fff}
.course-body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
.course-body h3{margin:0;color:#14233f;font-size:1.05rem;line-height:1.4;transition:.25s ease}
.course-card:hover .course-body h3{color:#0754c5}
.course-desc{margin:.55rem 0 0;color:#6b7890;font-size:.82rem;line-height:1.6}
.duration{display:inline-flex;align-items:center;gap:.4rem;margin:.8rem 0 0;color:#6b7890;font-size:.74rem}
.tag-wrap{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}
.tag{border-radius:999px;background:#edf5ff;padding:.25rem .55rem;color:#1762ca;font-size:.66rem;font-weight:700}
.course-actions{display:flex;gap:.55rem;margin-top:auto;padding-top:1.15rem}
.btn-mini-primary,.btn-mini-outline{display:inline-flex;flex:1;min-height:36px;align-items:center;justify-content:center;border-radius:9px;padding:.45rem .75rem;font-size:.74rem;font-weight:800;transition:.22s ease}
.btn-mini-primary{background:#075bc7;color:#fff;box-shadow:0 8px 18px rgba(7,84,197,.18)}
.btn-mini-primary:hover{background:#064ca8;color:#fff}.btn-mini-outline{border:1px solid #d4dfed;background:#fff;color:#24324a}
.btn-mini-outline:hover{border-color:#8bb6e9;background:#f4f8ff;color:#0754c5}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:1199.98px){.dubai-page-heading,.programs-heading{grid-template-columns:1fr;align-items:start}.dubai-campus-switch{width:max-content;max-width:100%}.program-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media(max-width:767.98px){.dubai-hero{min-height:590px}.dubai-campus-switch{width:100%;display:grid;grid-template-columns:1fr;gap:.35rem}.dubai-campus-switch a{justify-content:flex-start}.program-grid{grid-template-columns:1fr}.program-total{justify-self:start}.course-actions{flex-direction:column}}
/* Final three-option campus selector */
.dubai-campus-switch a:first-child{
  min-width:118px;
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (min-width:768px){
  .dubai-campus-switch{
    flex-wrap:nowrap;
  }
}

/* Responsive breakpoint: adjusts the related component for this viewport range. */
@media (max-width:767.98px){
  .dubai-campus-switch{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:.35rem;
  }
.dubai-campus-switch a{
  width:100%;
  justify-content:flex-start;
}
}