/* ==========================================================
   IAP — "GRADUATE SPECIALISATIONS" + "CAREER LAUNCH PROGRAMME"
   HubSpot Module CSS
   Same tokens as other sections: #000000 · #00AFCD · #C7C8CA
   ICONS: SVGs — circles, arcs and straight lines only, 1.6px stroke,
   on a 48-unit grid.
   ========================================================== */

.iap-pw{
  /* ================= TOKENS ================= */
  --acc:#00AFCD;
  --acc-hi:#5FD6EA;        /* lit state — a brighter tint of the same hue */
  --body:#C7C8CA;
  --dim:#7E8386;
  --hair:rgba(199,200,202,.13);
  --card:#0B0E0F;
  --lift:#0E1417;
  --pad:26px;
  --ease:220ms cubic-bezier(.4,0,.2,1);
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  /* ========================================== */

  color:var(--body);
  background:#000;
  font-family:inherit;
  max-width:1180px;
  margin:56px auto;
  padding:0 var(--pad) 44px;   /* real padding, not a collapsing child margin */
  box-sizing:border-box;
  overflow:visible;            /* never clip the panel glow or its ring */
}
.iap-pw *{box-sizing:border-box;}

/* ---------- Shared type ---------- */
.iap-pw__eyebrow{
  margin:0 0 10px;
  font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);
}
.iap-pw__h{
  margin:0 0 6px;
  font-size:30px;font-weight:700;line-height:1.1;
  letter-spacing:-.022em;color:#FFF;
}
.iap-pw__sub{
  margin:0 0 18px;
  font-family:var(--serif);
  font-style:italic;font-weight:400;
  font-size:18px;line-height:1.3;color:var(--acc);
}
.iap-pw__copy{margin:0 0 20px;font-size:13.5px;line-height:1.65;color:var(--dim);}
.iap-pw__ticks{list-style:none;margin:0;padding:0;}
.iap-pw__ticks li{
  position:relative;padding:0 0 11px 23px;
  font-size:12.5px;line-height:1.45;color:var(--body);
}
.iap-pw__ticks li::before{
  content:"";position:absolute;left:2px;top:3px;
  width:5px;height:9px;
  border:solid var(--acc);border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);
}
.iap-pw__count{
  display:inline-block;margin-top:4px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);
}

/* ---------- Icon medallion ---------- */
.iap-ico{
  color:var(--acc);
  width:52px;height:52px;
  border:1px solid rgba(0,175,205,.42);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  transition:border-color var(--ease),background var(--ease),color var(--ease),box-shadow var(--ease);
}
.iap-ico svg{width:26px;height:26px;display:block;}
.iap-ico--lg{
  width:64px;height:64px;
  background:rgba(0,175,205,.09);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.iap-ico--lg svg{width:32px;height:32px;transition:transform 380ms cubic-bezier(.34,1.4,.64,1);}

/* ==========================================================
   SECTION 1 — GRADUATE SPECIALISATIONS
   ========================================================== */
.iap-gs{
  display:grid;grid-template-columns:266px 1fr;
  column-gap:40px;align-items:start;
  padding:44px 0;
  border-top:1px solid var(--hair);
}
.iap-gs__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

/* --- Row alignment ------------------------------------------------------
   While all five sit on one line, each card becomes a subgrid of the
   parent's four rows: medallion / title / blurb / hours. Every row is
   sized by the tallest card, so titles start together, blurbs start
   together, and the hours rules land on one line.
   Falls back to the flex layout below 881px, where cards wrap.
   ---------------------------------------------------------------------- */
@media (min-width:881px){
  @supports (grid-template-rows:subgrid){
    .iap-gs__cards{
      grid-template-rows:auto auto auto auto;
      column-gap:16px;
    }
    .iap-gs__card{
      display:grid;
      grid-row:span 4;
      grid-template-rows:subgrid;
      row-gap:0;
    }
    .iap-gs__card > .iap-ico{align-self:start;}
    .iap-gs__card h4{align-self:start;}
    .iap-gs__card p{align-self:start;}
    .iap-gs__hrs{margin-top:0;align-self:end;}
  }
}
.iap-gs__card{
  position:relative;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--hair);
  border-radius:6px;
  padding:20px 16px 18px;
  display:flex;flex-direction:column;
  transition:border-color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease);
}
/* hairline that draws across the top edge on hover */
.iap-gs__card::before{
  content:"";
  position:absolute;grid-area:1/1;
  top:0;left:0;height:1px;width:0;
  background:linear-gradient(to right,var(--acc-hi),rgba(0,175,205,0));
  transition:width 340ms cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
@media (hover:hover){
  .iap-gs__card:hover{
    border-color:rgba(0,175,205,.45);
    background:var(--lift);
    transform:translateY(-3px);
  }
  .iap-gs__card:hover::before{width:100%;}
  .iap-gs__card:hover .iap-ico{
    color:rgba(0,175,205,.45);
    border-color:rgba(0,175,205,.45);
    background:rgba(0,175,205,.12);
  }
  .iap-gs__card:hover h4{color:#FFF;}
  .iap-gs__card:hover .iap-gs__hrs{color:var(--acc-hi);border-top-color:rgba(0,175,205,.35);}
}
.iap-gs__card h4{
  margin:20px 0 10px;
  font-size:14px;font-weight:700;line-height:1.3;
  letter-spacing:-.008em;color:#FFF;
}
.iap-gs__card p{margin:0 0 20px;font-size:12px;line-height:1.55;color:var(--dim);}
.iap-gs__card h4{min-height:0;}
.iap-gs__hrs{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--hair);
  font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--acc);
  font-variant-numeric:tabular-nums;
  transition:color var(--ease),border-color var(--ease);
}

/* ==========================================================
   SECTION 2 — CAREER LAUNCH PROGRAMME
   ========================================================== */
.iap-clp{
  position:relative;
  overflow:hidden;
  background:var(--card);
  border:0;
  border-radius:10px;
  margin:0 0 12px;
  transition:box-shadow var(--ease);
}
/* Ring drawn as an overlay on the top layer — cannot be clipped by
   overflow:hidden, the photo, or a parent container in HubSpot. */
.iap-clp::after{
  content:"";
  position:absolute;inset:0;
  border:1px solid var(--hair);
  border-radius:10px;
  pointer-events:none;
  z-index:3;
  transition:border-color var(--ease);
}
/* --- photograph + gradient veil --- */
.iap-clp__bg{position:absolute;inset:0;z-index:0;}
.iap-clp__bg img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:64% 38%;
  display:block;
  opacity:.9;
  filter:grayscale(.34) saturate(.86) contrast(1.03);
  transition:opacity 420ms cubic-bezier(.4,0,.2,1),filter 420ms cubic-bezier(.4,0,.2,1),transform 620ms cubic-bezier(.4,0,.2,1);
}
.iap-clp__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.42) 100%),
    linear-gradient(96deg, #000 0%, rgba(0,0,0,.96) 32%, rgba(0,0,0,.87) 56%, rgba(2,17,21,.72) 100%);
  transition:opacity 420ms cubic-bezier(.4,0,.2,1);
}
.iap-clp__inner{
  position:relative;z-index:1;
  padding:34px 34px 30px;
  display:grid;grid-template-columns:340px 1fr;
  column-gap:48px;align-items:start;
}
.iap-clp__intro .iap-pw__h{font-size:26px;}
.iap-clp__intro .iap-pw__sub{font-size:17px;margin-bottom:16px;}
.iap-clp__intro .iap-pw__copy{margin-bottom:0;max-width:44ch;color:#AEB4B7;}
.iap-clp__badge{display:flex;align-items:flex-start;gap:18px;margin:0 0 18px;}

.iap-clp__mods{
  list-style:none;margin:0;padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;          /* fills 01-05 down the left, 06-10 down the right */
  gap:10px 14px;
}
.iap-clp__mods li{
  display:flex;align-items:center;gap:13px;
  padding:11px 14px;
  background:rgba(8,12,14,.74);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid rgba(199,200,202,.16);
  border-radius:5px;
  font-size:12.5px;line-height:1.35;color:var(--body);
  transition:border-color var(--ease),color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease);
}
@media (hover:hover){
  .iap-clp__mods li:hover{
    border-color:rgba(0,175,205,.45);
    background:rgba(8,14,17,.9);
    color:#FFF;
    transform:translateX(4px);
  }
  .iap-clp__mods li:hover .iap-clp__n{
    background:rgba(0,175,205,.75);
    border-color:rgba(0,175,205,.75);
    color:#04191E;
  }
  .iap-clp__mods li:hover .iap-clp__n .z{opacity:.6;}
}
.iap-clp__n{
  flex:0 0 auto;
  width:25px;height:25px;
  border:1px solid rgba(0,175,205,.5);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;line-height:1;color:var(--acc);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.iap-clp__n .z{opacity:.45;}

/* ---------- Career Launch panel: lit state ---------- */
@media (hover:hover){
  .iap-clp:hover::after{border-color:rgba(0,175,205,.38);}
  /* the room comes up out of the dark */
  .iap-clp:hover .iap-clp__bg img{
    opacity:1;
    filter:grayscale(.14) saturate(.98) contrast(1.05);
    transform:scale(1.018);
  }
  .iap-clp:hover .iap-clp__bg::after{opacity:.92;}
  /* the rocket lifts */
  .iap-clp:hover .iap-ico--lg{
    color:var(--acc-hi);
    border-color:rgba(0,175,205,.45);
    background:rgba(0,175,205,.15);
  }
  .iap-clp:hover .iap-ico--lg svg{transform:translateY(-3px);}
}

@media (prefers-reduced-motion:reduce){
  .iap-pw *{transition:none !important;}
  .iap-clp:hover .iap-clp__bg img{transform:none !important;}
  .iap-clp:hover .iap-ico--lg svg{transform:none !important;}
  .iap-gs__card:hover,.iap-clp__mods li:hover{transform:none !important;border-color: rgba(0,175,205,.45);
        background: var(--lift);}
  .iap-gs__card::before{transition:none !important;display:none;}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .iap-gs{grid-template-columns:1fr;row-gap:32px;}
  .iap-gs__intro{max-width:62ch;}
  .iap-clp__inner{grid-template-columns:1fr;row-gap:30px;}
  .iap-clp__intro .iap-pw__copy{max-width:64ch;}
  /* stacked layout — veil goes vertical so the photo reads behind both halves */
  .iap-clp__bg::after{
    background:
      linear-gradient(to bottom, rgba(0,0,0,.86) 0%, rgba(0,0,0,.93) 42%, rgba(0,0,0,.96) 100%);
  }
  .iap-clp__bg img{object-position:60% 34%;}
}
@media (max-width:880px){
  .iap-gs__cards{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:640px){
  .iap-gs__cards{grid-template-columns:repeat(2,1fr);}
  .iap-clp__mods{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;}
  .iap-clp__inner{padding:26px 22px 24px;}
}
@media (max-width:430px){
  .iap-pw{--pad:18px;}
  .iap-gs__cards{grid-template-columns:1fr;}
  .iap-pw__h{font-size:26px;}
}