/* =========================================================
   Program Grid — home page

   Deliberately mirrors the Eligibility Checker's Overview cards. HubSpot gives us no shared
   stylesheet, so this is a duplicate on purpose - change both modules in the same pass.

   Class names are prefixed pg- rather than reusing .program-card / .card-grid / .tb-carousel*,
   because those are GLOBAL in the checker's stylesheet. If both modules ever land on one page,
   shared names would have them restyling each other.

   Everything is scoped under .tb-pgrid so the module cannot leak into the surrounding page.
   ========================================================= */

.tb-pgrid{
  --pg-max: 1200px;
  --pg-gap: 1rem;
  max-width: var(--pg-max);
  margin: 0 auto;
  box-sizing: border-box;
}
.tb-pgrid *,
.tb-pgrid *::before,
.tb-pgrid *::after{ box-sizing: border-box; }

@media (max-width: 640px){
  .tb-pgrid{ padding-left: 15px; padding-right: 15px; }
}
@media (min-width: 641px) and (max-width: 1024px){
  .tb-pgrid{ padding-left: 15px; padding-right: 15px; }
}

/* =========================
   Card grid
   ========================= */
.tb-pgrid .pg-grid{
  display: grid;
  gap: var(--pg-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 641px){
  .tb-pgrid .pg-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
  .tb-pgrid .pg-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* =========================
   Card
   ========================= */
.tb-pgrid .pg-card{
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;     /* content sits over the darkest part of the scrim */
  gap: .6rem;
  padding: 1.25rem;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;         /* the card is an <a> linking to the program page */
  color: #fff;
  cursor: pointer;
  background-color: #1b2432;     /* shows while the image loads */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*
   * border-origin fix, carried over from the checker: background-clip defaults to border-box
   * but background-ORIGIN defaults to padding-box, so with any border the image stops short and
   * the background COLOUR paints a hairline around the whole card. There is no border here, but
   * this keeps it correct if one is ever added.
   */
  background-origin: border-box;
  border: 0;
  transition: transform .2s ease;
  /* Fallback for browsers without aspect-ratio (older mobile Safari). */
  min-height: 420px;
}
@supports (aspect-ratio: 3 / 4){
  .tb-pgrid .pg-card{ aspect-ratio: 3 / 4; min-height: 0; }
}
.tb-pgrid .pg-card:hover{ transform: translateY(-2px); }
.tb-pgrid .pg-card:focus-visible{ outline: 3px solid #ffaa00; outline-offset: 2px; }

/* Readability gradient: clear at the top so the photo reads, opaque at the bottom under the
   title, specs and blurb. */
.tb-pgrid .pg-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.45) 62%,
    rgba(0,0,0,.82) 100%);
  pointer-events: none;
}

/* Lift the real content above the scrim. */
.tb-pgrid .pg-card > *{ position: relative; z-index: 1; }

/* =========================
   Tags
   Intake top left, category top right. Same translucent dark family as the spec block so the
   card reads as one object rather than layers pasted over a photo.
   ========================= */
.tb-pgrid .pg-tag{
  position: absolute;
  top: .75rem;
  z-index: 2;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .01em;
  white-space: nowrap;
}
.tb-pgrid .pg-tag--type{ right: .75rem; }

/* The intake tag stacks a small label above the date, so it stays ~110px wide instead of the
   ~190px a single line would need - at 353px in carousel mode a one-line version would nearly
   touch the category pill. */
.tb-pgrid .pg-tag--intake{
  left: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: .3rem .65rem;
  border-radius: 12px;
  line-height: 1.25;
}
.tb-pgrid .pg-tag--intake .pg-tag__label{
  font-size: .62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
}
.tb-pgrid .pg-tag--intake .pg-tag__value{
  font-size: .8rem;
  font-weight: 700;
}

/* =========================
   Card content
   ========================= */

/* Two lines reserved whether the name needs them or not. Content is bottom-aligned, so a
   one-line name would otherwise sit the spec block a line lower than a two-line one and the
   blocks across a row would not line up. */
.tb-pgrid .pg-title{
  margin: 0;
  /*
   * Colour set explicitly, not inherited from .pg-card. The card is an <a> and this is an <h4>,
   * and any theme rule such as `h4 { color: #333 }` beats inheritance no matter how weak it is,
   * so the title came through dark on the live page while looking correct in isolation. Same
   * reason font-size is stated rather than left to the theme's h4.
   */
  color: #fff;
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.3em);
}

/*
 * Spec block: two columns, Degree over Age on the left, Cost over Duration on the right.
 * Same translucent dark as the tags rather than a tinted panel - the photos vary too much for
 * a fixed colour to sit well over all of them.
 */
.tb-pgrid .pg-specs{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .75rem;
  margin: 0;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: rgba(11,18,32,.52);
  border: 1px solid rgba(255,255,255,.14);
}
.tb-pgrid .pg-specs dt{
  margin: 0;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255,255,255,.72);
  line-height: 1.3;
}
.tb-pgrid .pg-specs dd{
  margin: 0 0 .15rem;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
/* The dl runs dt,dd,dt,dd... so each pair is placed explicitly: left column carries Degree then
   Age, right column carries Cost then Duration. */
.tb-pgrid .pg-specs dt:nth-of-type(1){ grid-area: 1 / 1; }
.tb-pgrid .pg-specs dd:nth-of-type(1){ grid-area: 2 / 1; }
.tb-pgrid .pg-specs dt:nth-of-type(2){ grid-area: 1 / 2; }
.tb-pgrid .pg-specs dd:nth-of-type(2){ grid-area: 2 / 2; }
.tb-pgrid .pg-specs dt:nth-of-type(3){ grid-area: 3 / 1; }
.tb-pgrid .pg-specs dd:nth-of-type(3){ grid-area: 4 / 1; }
.tb-pgrid .pg-specs dt:nth-of-type(4){ grid-area: 3 / 2; }
.tb-pgrid .pg-specs dd:nth-of-type(4){ grid-area: 4 / 2; }

/*
 * Fixed to exactly 3 lines, whether the text needs them or not. min-height reserves, the clamp
 * caps; both are needed or the spec blocks across a row stop lining up. Budget is roughly 132
 * characters at the carousel card width, ~145 in grid mode where the cards are wider.
 */
.tb-pgrid .pg-blurb{
  margin: 0;
  color: rgba(255,255,255,.92);
  font-size: .95rem;
  line-height: 1.4;
  text-align: left;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(3 * 1.4em);
}

/* =========================
   Carousel (desktop only, >= 992px, and only with data-layout="carousel")
   ========================= */
.tb-pgrid .pg-carousel__stage{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.tb-pgrid .pg-carousel__viewport{
  flex: 1 1 auto;
  min-width: 0;                  /* lets the flex child shrink so overflow can clip */
}
.tb-pgrid .pg-carousel__arrow{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(11,18,32,.16);
  background: #fff;
  color: #0b1220;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.tb-pgrid .pg-carousel__arrow:disabled{ opacity: .35; cursor: default; box-shadow: none; }
.tb-pgrid .pg-carousel__arrow[hidden]{ display: none !important; }

.tb-pgrid .pg-carousel__dots{
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-top: .85rem;
}
.tb-pgrid .pg-carousel__dots[hidden]{ display: none !important; }
.tb-pgrid .pg-carousel__dot{
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  border: none;
  background: rgba(11,18,32,.22);
  cursor: pointer;
}
.tb-pgrid .pg-carousel__dot.is-active{ background: #028f6d; }

@media (min-width: 992px){
  /*
   * overflow:hidden clips at the PADDING box, so this padding is what keeps a card's focus
   * outline from being sliced off - vertically on every card, horizontally on the first and
   * last of each page. 6px is well inside the 16px inter-card gap, so no part of the
   * neighbouring page shows through it.
   */
  .tb-pgrid[data-layout="carousel"] .pg-carousel__viewport{ overflow: hidden; padding: 6px; }

  /*
   * Carousel only: the grid becomes a single flex row that slides, three cards and two 1rem
   * gaps per page. With data-layout="grid" none of this applies, so .pg-grid keeps its
   * repeat(3, 1fr) and simply wraps onto as many rows as it needs.
   */
  .tb-pgrid[data-layout="carousel"] .pg-grid{
    display: flex;
    grid-template-columns: none;
    gap: var(--pg-gap);
    transition: transform .35s ease;
    will-change: transform;
  }
  .tb-pgrid[data-layout="carousel"] .pg-grid > .pg-card{
    flex: 0 0 calc((100% - (2 * var(--pg-gap))) / 3);
    max-width: calc((100% - (2 * var(--pg-gap))) / 3);
  }
}