/* 2026 refresh: program detail page. Spec 2.3 (D1-D9). Markup: renderDetailPage() in src/lib/webflow.ts with the templates
   src/webflow/detail-*.html; behaviour: public/refresh/detail.js. Loaded after refresh.css; the page's Webflow snapshot
   is public/webflow/detail.css. */

/* D1 Photo banner: full bleed under the bar, 397px tall at 1440 */
.section_detail-hero { padding-top: var(--nav-h); }
.detail-hero_image { height: clamp(15rem, 27.6vw, 31rem); overflow: hidden; background-color: var(--_style-guide-2-0---outset-grey); }
.detail-hero_img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* D2 Breadcrumb, D3 grid: content 720px and card 424px, 72px apart (1216px at 1440) */
.section_detail { padding-top: 3rem; padding-bottom: 6rem; }
.detail_component { max-width: 76rem; margin-left: auto; margin-right: auto; }
.detail_layout {
  display: grid;
  grid-template-columns: minmax(0, 45rem) clamp(22.5rem, 29.5vw, 26.5rem); /* the card gives way first on small laptops */
  justify-content: space-between;
  align-items: start;
  column-gap: 3rem;
  margin-top: 3.75rem;
}

/* D4 Content column: every block opens with a rule. Caslon sits low in its 44px line, so the block's top padding is 22px
   and the heading's bottom gap 34px: that puts the capitals 31px under the rule and the text where the design has it. */
.detail_main { min-width: 0; }
.detail_block { padding: 1.375rem 0 3.75rem; border-top: 1px solid var(--_style-guide-2-0---outset-soft-black-tint); }
.detail_block.is-faq { padding-bottom: 0; }
.detail_rich {
  max-width: 43rem;
  margin-top: 2.125rem;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5556;
  letter-spacing: -.01em;
}
/* :where keeps these at class weight, so the spacing rules below still win */
.detail_rich :where(p, ul, li) { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.detail_rich > * + * { margin-top: 1.75rem; }
.detail_rich strong { font-weight: 600; }
.detail_rich a { color: var(--_style-guide-2-0---outset-mid-blue); }
.detail_rich ul { padding-left: 1.5rem; list-style: none; }
.detail_rich li { position: relative; }
.detail_rich li + li { margin-top: .5rem; }
.detail_rich li::before { content: ""; position: absolute; top: .75rem; left: -.875rem; width: .25rem; height: .25rem; background-color: currentColor; }
.detail_label {
  margin: 3.5rem 0 0;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5556;
  letter-spacing: -.01em;
}
.detail_label + .detail_rich { margin-top: .5rem; }
.detail_guide.button {
  display: inline-flex;
  min-width: 15.6875rem;
  margin-top: 2.5rem;
  border-width: 1px;
  border-color: var(--_style-guide-2-0---outset-mid-blue);
  border-radius: 1px;
  background-color: transparent;
  color: var(--_style-guide-2-0---outset-mid-blue);
  transition: background-color .2s, color .2s;
}
.detail_guide.button:hover { background-color: var(--_style-guide-2-0---outset-mid-blue); color: var(--_style-guide-2-0---outset-off-white); }
.detail_video.experience_video { max-width: none; margin-top: 3.5rem; border-radius: 1.5rem; }
.detail_block.is-faq .faq-list-wrap { margin-top: 2.125rem; }
.detail_block.is-faq .w-dyn-item:last-child .faq-item { border-bottom: 1px solid rgba(0, 115, 245, .35); }
.detail_faq-button.button { display: inline-flex; margin-top: 2.5rem; }

/* D5 Sidebar card + Trustpilot. Sticky only where the whole column fits under the bar. */
.detail_aside { display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
@media screen and (min-width: 992px) and (min-height: 48rem) {
  .detail_aside { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
}
.detail-card_component {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(230, 230, 230, .5);
  border-radius: .5rem;
  background-color: var(--_style-guide-2-0---white);
  box-shadow: 0 0 12px rgba(18, 18, 22, .1);
}
.detail-card_list { display: flex; flex-direction: column; gap: 1.4375rem; margin: 0; }
.detail-card_row { display: flex; flex-direction: column; gap: .25rem; }
.detail-card_label {
  display: block;
  margin: 0;
  color: rgba(18, 18, 22, .5);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.detail-card_value {
  margin: 0;
  color: var(--_style-guide-2-0---outset-soft-black);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 2.25rem;
  letter-spacing: -.03em;
}
.detail-card_dates { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.4375rem; }

/* Dates: a native <select> laid transparently over the face, so keyboard, screen readers and phone pickers get a real select */
.detail-dates_control { position: relative; }
.detail-dates_face {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: .5rem 1rem .5rem 1.25rem;
  border: 1px solid var(--_style-guide-2-0---outset-soft-black-tint);
  border-radius: 4px;
  background-color: var(--_style-guide-2-0---white);
  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;
  transition: border-color .2s;
}
/* long dates ("June 7 – June 12, 2026") unless they do not fit beside the status: detail.js sets .is-short, then .is-stacked */
.detail-dates_date { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-dates_short,
.detail-dates_control.is-short .detail-dates_long { display: none; }
.detail-dates_control.is-short .detail-dates_short { display: inline; }
.detail-dates_control.is-stacked .detail-dates_face { flex-wrap: wrap; row-gap: .5rem; padding-top: .75rem; padding-bottom: .75rem; }
.detail-dates_control.is-stacked .detail-dates_date { flex-basis: 100%; }
.detail-dates_face .detail-dates_status { flex: none; padding: .25rem .5rem; grid-column-gap: .375rem; grid-row-gap: .375rem; letter-spacing: 0; }
.detail-dates_tri {
  flex: none;
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: .5rem solid var(--_style-guide-2-0---outset-soft-black);
  border-left: .5rem solid transparent;
  border-right: .5rem solid transparent;
}
.detail-dates_select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  font-size: 1rem; /* below 16px iOS zooms the page when the picker opens */
  cursor: pointer;
}
.detail-dates_select:hover + .detail-dates_face { border-color: var(--_style-guide-2-0---outset-soft-black); }
.detail-dates_select:focus-visible + .detail-dates_face { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.detail-card_cta.button { width: 100%; min-height: 3.5rem; margin-top: 2rem; border-radius: 4rem; }
.detail-card_cta.button.is-waitlist { border-color: var(--_style-guide-2-0---outset-red); background-color: var(--_style-guide-2-0---outset-red); }
/* Trustpilot Micro Combo at the card's full width: at 424px it adds "208 reviews on Trustpilot", narrower it shows only
   the rating and stars (centred inside its iframe either way) */
.detail-card_rating { min-height: 1.25rem; }

/* D6 Other programs at the campus: full-bleed card row at 24px insets, Select Dates pill left of the centred heading */
.section_other-programs { padding: .875rem 1.5rem 7rem; }
.other-programs_head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1.5rem;
  margin-bottom: 2.5rem;
}
.other-programs_heading { grid-column: 2; grid-row: 1; text-align: center; }
.other-programs_campus { white-space: nowrap; } /* "UNC-Chapel Hill" broke at its hyphen on phones */
.other-programs_filter { grid-column: 1; grid-row: 1; justify-self: start; }
.other-programs_select {
  -webkit-appearance: none;
  appearance: none;
  min-width: 10rem;
  height: 2.5rem;
  margin: 0;
  padding: 0 1.5rem;
  border: 1px solid var(--_style-guide-2-0---white);
  border-radius: 1.5rem;
  background-color: var(--_style-guide-2-0---white);
  box-shadow: 0 0 12px rgba(18, 18, 22, .1);
  color: var(--_style-guide-2-0---outset-mid-blue);
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  text-align-last: center;
  cursor: pointer;
}
.other-programs_select:hover { border-color: var(--_style-guide-2-0---outset-mid-blue); }
.other-programs_select:focus-visible { outline: 2px solid var(--_style-guide-2-0---outset-mid-blue); outline-offset: 2px; }
.other-programs_list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.other-programs_empty {
  margin: 0;
  padding: 2rem 0;
  font-family: Marrsans Web, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5556;
  text-align: center;
}
.other-programs_reset {
  margin-left: .5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_style-guide-2-0---outset-mid-blue);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.other-programs_more { display: flex; justify-content: flex-end; margin-top: 2rem; }
/* "Explore all programs" round arrow (same as public/refresh/program.css, which this page does not load) */
.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); }

/* D7 Included (program template partial). This page's Webflow chunk never had the section, so it lacks these base rules
   (copied from the program chunk). The chunk does carry their media rules, which load before this file: repeated below. */
.container-medium { width: 100%; max-width: 64rem; margin-left: auto; margin-right: auto; }
.included_list { display: grid; grid-template-columns: 1fr; grid-auto-columns: 1fr; grid-column-gap: 2rem; grid-row-gap: 2rem; }
.included_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  justify-content: flex-start;
  align-items: flex-end;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--_style-guide-2-0---outset-soft-black-tint);
}
.included_p { max-width: 30ch; }
.heading-style-h3 { margin-top: 0; margin-bottom: 0; font-family: Caslonionic Web, Arial, sans-serif; font-size: 3rem; font-weight: 300; line-height: 1.3; }
.heading-style-h3.is-alt { font-family: Marrsans Web, Arial, sans-serif; }
@media screen and (min-width: 1440px) {
  .included_p { max-width: 40ch; }
}

@media screen and (max-width: 1199px) {
  .detail-dates_face { gap: .75rem; padding-left: 1rem; }
}
@media screen and (max-width: 991px) {
  .heading-style-h3 { font-size: 2.5rem; }
  .included_item { grid-column-gap: 1rem; grid-row-gap: 1rem; flex-flow: column; justify-content: flex-start; place-items: end stretch; }
  .included_p { max-width: none; }

  .section_detail { padding-top: 2rem; padding-bottom: 4.5rem; }
  .detail_layout { grid-template-columns: minmax(0, 1fr); row-gap: 3.5rem; margin-top: 2.5rem; }
  .detail_aside { max-width: 26.5rem; }
  .section_other-programs { padding-bottom: 5rem; }
  .other-programs_head { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; margin-bottom: 2rem; }
  .other-programs_heading { grid-column: 1; }
  .other-programs_filter { grid-column: 1; grid-row: 2; justify-self: center; }
  .other-programs_list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 767px) {
  .heading-style-h3 { font-size: 2.25rem; }

  .section_detail { padding-bottom: 3.5rem; }
  .detail_block { padding-bottom: 3rem; }
  .detail_label { margin-top: 2.5rem; }
  .detail_video.experience_video { margin-top: 2.5rem; border-radius: 1rem; }
  .detail_aside { max-width: none; }
  .section_other-programs { padding: 0 0 4rem; }
  .other-programs_head { padding: 0 1rem; }
  /* phone: one swipeable row; the padding keeps the card shadows inside the scroll box, which clips both axes */
  .other-programs_list { display: flex; margin: -.75rem 0; padding: .75rem 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1rem; scrollbar-width: none; }
  .other-programs_list::-webkit-scrollbar { display: none; }
  .other-programs_list > * { flex: none; width: 80%; scroll-snap-align: start; }
  .other-programs_empty { padding: 1rem; }
  .other-programs_more { padding: 0 1rem; }
}
@media screen and (max-width: 479px) {
  .heading-style-h3 { font-size: 2rem; }
  .included_item { grid-column-gap: .5rem; grid-row-gap: .5rem; grid-template-columns: 1fr; }

  .section_detail-hero .detail-hero_image { height: 15rem; }
  .detail-card_component { padding: 1.5rem 1rem; }
  .detail-card_value { font-size: 1.5rem; line-height: 2rem; }
  .detail_guide.button,
  .detail_faq-button.button { width: 100%; }
}