/* 2026 refresh: program page template (src/lib/templates/program-page.js). Spec sections 2.1 P1, P6, P11, P12.
   The campus template reuses the campus cards, logos strip and popular band. */

/* P1 Hero: photo 43%, panel 57%, 768px tall under the 88px bar */
.section_program-hero { padding-top: var(--nav-h); }
.program-hero_component { display: flex; min-height: 48rem; border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.program-hero_image { position: relative; flex: none; width: 43.33%; overflow: hidden; background-color: var(--_style-guide-2-0---outset-grey); }
.program-hero_image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.program-hero_panel {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 4rem 3.25rem;
  background: #f3f7f7 url(/refresh/hero-burst-turquoise.svg) 50% / cover no-repeat;
  color: var(--_style-guide-2-0---outset-soft-black);
  --check-tick: var(--_style-guide-2-0---outset-off-white);
}
.section_program-hero.is-sand .program-hero_panel { background-color: #d7c8af; background-image: url(/refresh/hero-burst-sand.svg); }
.section_program-hero.is-blue .program-hero_panel {
  background-color: #004fa8;
  background-image: url(/refresh/hero-burst-blue.svg);
  color: var(--_style-guide-2-0---outset-off-white);
  --check-tick: #004fa8;
}
.program-hero_content { width: 100%; max-width: 53.5rem; }
.program-hero_chips { display: flex; flex-wrap: wrap; gap: .5rem .75rem; margin: 2.5rem 0 1.5rem; padding: 0; list-style: none; }
.program-hero_chip {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin: 0;
  font-family: Caslonionic Web, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.1429;
}
.program-hero_chip svg { flex: none; width: 1.125rem; height: 1.125rem; }
.section_program-hero.is-blue .program-hero_heading { font-size: 4.5rem; line-height: 1; letter-spacing: -.04em; }
.program-hero_intro { max-width: 35.25rem; margin-top: 1.5rem; }
.program-hero_intro p { margin: 0; }
.program-hero_form { max-width: 32rem; margin: 3.5rem 0 0; }
.program-hero_form-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 4rem;
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint);
  border-radius: 2px;
  background-color: var(--_style-guide-2-0---white);
}
.program-hero_form-row:focus-within { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.program-hero_input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 0 0 1rem;
  border: 0;
  background: transparent;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
}
.program-hero_input::placeholder { color: #787880; }
.program-hero_input:focus { outline: none; }
.program-hero_submit.button { flex: none; padding-left: 1.5rem; padding-right: 1.5rem; border-color: var(--_style-guide-2-0---outset-soft-black); background-color: var(--_style-guide-2-0---outset-soft-black); }
.program-hero_form .w-form-done { padding: 1rem; background-color: var(--_style-guide-2-0---white); text-align: left; }
.program-hero_apply.button { display: inline-flex; margin-top: 2.5rem; min-width: 13.4375rem; } /* .button is display:flex, which fills the panel */
.section_program-hero.is-sand .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-red-brown); background-color: var(--_style-guide-2-0---outset-red-brown); }
.section_program-hero.is-blue .program-hero_apply.button { border-color: var(--_style-guide-2-0---outset-turquoise); background-color: var(--_style-guide-2-0---outset-turquoise); }
@media screen and (max-width: 991px) {
  .program-hero_component { flex-direction: column; min-height: 0; }
  .program-hero_image { width: 100%; aspect-ratio: 4 / 3; max-height: 50vh; }
  .program-hero_panel { padding: 2.5rem 1.5rem 3rem; }
  .section_program-hero.is-blue .program-hero_heading { font-size: 3.5rem; }
  .program-hero_chips { margin-top: 1.5rem; }
}
@media screen and (max-width: 767px) {
  .section_program-hero.is-blue .program-hero_heading { font-size: 2.75rem; }
  .program-hero_form { margin-top: 2rem; }
  /* phone: field and button stack (the snapshot makes every .button full width below 480px) */
  .program-hero_form-row { flex-wrap: wrap; height: auto; padding: 0; border: 0; background: transparent; }
  .program-hero_form-row:focus-within { outline: none; }
  .program-hero_input { flex-basis: 100%; height: 3.5rem; padding: 0 1rem; border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); border-radius: 2px; background: var(--_style-guide-2-0---white); }
  .program-hero_input:focus { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
  .program-hero_submit.button { width: 100%; }
}
@media screen and (max-width: 479px) {
  .program-hero_panel { padding: 2rem 1rem 2.5rem; }
  .section_program-hero.is-blue .program-hero_heading { font-size: 2.25rem; }
  .program-hero_submit.button { padding-left: 1rem; padding-right: 1rem; }
  .program-hero_apply.button { width: 100%; }
}

/* P6 / C4 campus cards: full-bleed row, 24px insets */
.section_campus-cards { padding: 5.5rem 1.5rem 4.5rem; }
.campus-cards_heading { margin-bottom: 3rem; text-align: center; }
.campus-cards_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; }
.campus-cards_card { display: flex; flex-direction: column; gap: 1rem; color: var(--_style-guide-2-0---outset-soft-black); text-decoration: none; }
.campus-cards_image { aspect-ratio: 336 / 388; overflow: hidden; border-radius: .5rem; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color .2s; }
.campus-cards_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.campus-cards_name { margin: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 1.3125rem; font-weight: 400; line-height: 1.2; letter-spacing: -.03em; transition: color .2s; }
.campus-cards_card:hover .campus-cards_name,
.campus-cards_card:focus-visible .campus-cards_name { color: var(--_style-guide-2-0---outset-mid-blue); }
.campus-cards_card:hover .campus-cards_image,
.campus-cards_card:focus-visible .campus-cards_image { outline-color: var(--_style-guide-2-0---outset-mid-blue); }
.campus-cards_more { display: flex; justify-content: flex-end; margin-top: 2rem; }
.icon-link_component {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-decoration: none;
}
.icon-link_button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--_style-guide-2-0---outset-mid-blue);
  color: var(--_style-guide-2-0---outset-off-white);
  transition: transform .2s;
}
.icon-link_component:hover .icon-link_button { transform: translateX(.25rem); }
@media screen and (max-width: 991px) {
  .campus-cards_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .section_campus-cards { padding: 4rem 0 3.5rem; }
  .campus-cards_heading { padding: 0 1rem; margin-bottom: 2rem; }
  .campus-cards_list { display: flex; gap: 1rem; padding: 0 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .campus-cards_list::-webkit-scrollbar { display: none; }
  .campus-cards_card { flex: none; width: 75%; scroll-snap-align: start; }
  .campus-cards_more { padding: 0 1rem; }
}

/* P11 University logos */
.section_logos { background-color: var(--_style-guide-2-0---outset-off-white); }
.logos_component { display: flex; flex-direction: column; align-items: center; gap: 3rem; padding: 5.5rem 0; text-align: center; }
.logos_heading { max-width: 36rem; }
.logos_row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 4.5rem; margin: 0; padding: 0; list-style: none; }
.logos_item { margin: 0; }
.logos_image { display: block; width: auto; height: 3.75rem; max-width: 13.625rem; object-fit: contain; }
.logos_disclaimer { max-width: 40rem; margin: 0; font-family: Marrsans Web, Arial, sans-serif; font-size: 1.125rem; font-weight: 400; line-height: 1.5556; letter-spacing: -.01em; }
@media screen and (max-width: 767px) {
  .logos_component { gap: 2rem; padding: 4rem 0; }
  .logos_row { gap: 1.5rem 2.5rem; }
  .logos_image { height: 2.75rem; }
  .logos_disclaimer { font-size: 1rem; }
}

/* P12 Popular programs band (reuses .section_tabs for the blue band and its artwork) */
.tabs-2026_component { display: grid; grid-template-columns: minmax(0, 41.375rem) minmax(0, 1fr); align-items: center; gap: 4rem; padding: 1.5rem 1.5rem 1.5rem; }
.tabs-2026_image { aspect-ratio: 662 / 648; overflow: hidden; }
.tabs-2026_image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tabs-2026_content { padding: 2rem 0; }
.tabs-2026_eyebrow { margin-bottom: 1.5rem; color: var(--_style-guide-2-0---outset-dark-blue); }
.tabs-2026_list { margin: 0 0 2.5rem; padding: 0; list-style: none; }
.tabs-2026_list > li { margin: 0; }
.tabs-2026_content .button { display: inline-flex; }
.tabs-2026_link {
  display: inline-block;
  color: var(--_style-guide-2-0---outset-off-white);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 3rem;
  font-weight: 600;
  line-height: 1.1667;
  letter-spacing: -.03em;
  text-decoration: none;
  transition: color .2s;
}
.tabs-2026_link:hover,
.tabs-2026_link:focus-visible { color: var(--_style-guide-2-0---outset-dark-blue); }
@media screen and (max-width: 991px) {
  .tabs-2026_component { grid-template-columns: 1fr; gap: 2rem; padding: 1rem 1rem 3rem; }
  .tabs-2026_link { font-size: 2.25rem; }
}
@media screen and (max-width: 479px) {
  .tabs-2026_link { font-size: 1.875rem; }
}

/* P4 Marquee: no heading (partial), 3:4 cards */
.section_marquee .vertial-card_marquee { aspect-ratio: 3 / 4; width: 17.375rem; max-width: none; }
@media screen and (max-width: 767px) { .section_marquee .vertial-card_marquee { width: 13rem; min-height: 0; } }