/* ==========================================================================
   ESC - Internship detail page (prototype)

   Layout only. Loaded after main.css, which supplies the nav, footer, floating
   WhatsApp button and the Plus Jakarta Sans stack. Every colour here is drawn
   from the palette already in main.css rather than introduced:

     #202d7c  navbar navy          #0c1b48  heading ink
     #1a3399  panel navy           #1a56db  link / accent blue
     #ffc72c  primary yellow       #f7be16  rule yellow
     #f7f9fd  page tint            #e2e8f0  hairline

   Following main.css's own convention, colours are written directly in the
   selectors rather than as :root variables.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero banner
   -------------------------------------------------------------------------- */
.esc-det-hero {
  position: relative;
  background-color: #0c1b48;
  overflow: hidden;
}

.esc-det-hero-img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Dark at the top where the controls sit, clear over the middle of the
   photograph, so the banner is never flattened by a full-bleed wash. */
.esc-det-hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(12, 27, 72, 0.72) 0%,
    rgba(12, 27, 72, 0.28) 38%,
    rgba(12, 27, 72, 0.12) 70%,
    rgba(12, 27, 72, 0.35) 100%
  );
}

.esc-det-hero-inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.esc-det-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-decoration: none;
  background-color: rgba(12, 27, 72, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50px;
  padding: 8px 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background-color 0.2s ease, gap 0.2s ease;
}

.esc-det-back:hover,
.esc-det-back:focus-visible {
  background-color: rgba(12, 27, 72, 0.7);
  color: #ffffff;
  gap: 13px;
}

.esc-det-hero-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #ffffff;
  color: #0c1b48;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 8px 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.esc-det-hero-flag i {
  color: #1a56db;
}

/* --------------------------------------------------------------------------
   2. Title bar
   -------------------------------------------------------------------------- */
.esc-det-titlebar {
  background-color: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding-block: 34px 30px;
}

/* A Bootstrap row now, so the facts take the same 5 columns the overview
   image takes and the two line up down the page. */
.esc-det-titlebar-inner {
  align-items: flex-end;
}

.esc-det-title {
  font-size: 2.6rem;
  font-weight: 850;
  /* #1f8a65 is the green already in main.css (.esc-icon-green), not a new one.
     It reads 4.3:1 on white - clear of the 3:1 large-text minimum. The brighter
     WhatsApp green sits at about 2:1 here and would not have been legible. */
  color: #1f8a65;
  line-height: 1.12;
  letter-spacing: -0.6px;
  margin-bottom: 10px;
  text-wrap: balance;
}

.esc-det-university {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #4a5676;
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0;
}

.esc-det-university i {
  color: #1a56db;
  font-size: 1.15rem;
}

/* Three facts, so they sit on one line and read as a set. */
.esc-det-facts {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background-color: #f7f9fd;
}

/* Equal thirds, so the bar fills its column rather than sizing to its text. */
.esc-det-facts li {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-right: 1px solid #e2e8f0;
}

.esc-det-facts li:last-child {
  border-right: none;
}

.esc-det-fact-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7b88a8;
}

.esc-det-fact-value {
  font-size: 1.05rem;
  font-weight: 850;
  color: #0c1b48;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shared section furniture
   -------------------------------------------------------------------------- */
.esc-det-section {
  background-color: #ffffff;
  padding-block: 56px;
}

.esc-det-section-tint {
  background-color: #f7f9fd;
  border-block: 1px solid #e2e8f0;
}

.esc-det-eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1a56db;
  margin-bottom: 10px;
}

.esc-det-h2 {
  font-size: 2.1rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.16;
  letter-spacing: -0.4px;
  margin-bottom: 0;
  text-wrap: balance;
}

.esc-det-yellow-rule {
  width: 38px;
  height: 3.5px;
  background-color: #f7be16;
  border-radius: 2px;
  margin: 16px 0 22px 0;
}

.esc-det-body {
  color: #4a5676;
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 16px;
  max-width: 62ch;
}

.esc-det-ticks {
  list-style: none;
  padding: 0;
  margin: 22px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.esc-det-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: #0c1b48;
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.45;
}

.esc-det-ticks i {
  color: #27ae7c;
  font-size: 1.05rem;
  line-height: 1.4;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   3. Overview figure
   -------------------------------------------------------------------------- */
.esc-det-figure {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(18, 30, 84, 0.14);
}

/* The row stretches, so the figure fills whatever height the copy sets. The
   min-height is for the short-copy case, where there is nothing to stretch to. */
.esc-det-figure {
  height: 100%;
  min-height: 320px;
}

.esc-det-figure-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --------------------------------------------------------------------------
   4. Map
   -------------------------------------------------------------------------- */
/* 4:3 while the two columns are stacked, matching the map image, so it uses the
   full width of a phone instead of being letterboxed into a wider box. The
   ratio is held at every width, not just here: the box matching the image is
   what lets the map fill it exactly, with neither bands around it nor a crop
   through its key. */
.esc-det-map {
  position: relative;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dce4ef;
  box-shadow: 0 10px 30px rgba(18, 30, 84, 0.08);
  background-color: #f1f6fd;
  display: block;
  text-decoration: none;
}

/* cover, now that the box holds the image's own 4:3. The two agree, so nothing
   is cropped and nothing is letterboxed - and a future map a little off 4:3
   fills the box rather than sitting in a band of background. */
.esc-det-map-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

/* The box stretches to the copy beside it, so the crop is not fixed - a slight
   lift on hover is the only cue that the picture is a link. */
.esc-det-map:hover .esc-det-map-img,
.esc-det-map:focus-visible .esc-det-map-img {
  transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .esc-det-map-img {
    transition: none;
  }
  .esc-det-map:hover .esc-det-map-img {
    transform: none;
  }
}

.esc-det-maplink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1a56db;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.esc-det-maplink:hover,
.esc-det-maplink:focus-visible {
  color: #0d3fa8;
  gap: 13px;
}

/* --------------------------------------------------------------------------
   5. Day-wise program
   -------------------------------------------------------------------------- */
.esc-det-days {
  list-style: none;
  margin: 28px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

.esc-det-day {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid #e9edf5;
  position: relative;
}

/* Without flex:1 the body is only as wide as its own longest line, so every
   day ended at a different x and the session tags staggered down the page.
   min-width:0 lets it shrink below its content width instead of forcing the
   row wider. */
.esc-det-day-body {
  flex: 1;
  min-width: 0;
}

.esc-det-day:last-child {
  border-bottom: none;
}

/* The connecting rule is what makes this read as a sequence rather than a
   stack of unrelated rows. Stops short of the last marker. */
.esc-det-day:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 68px;
  bottom: -4px;
  width: 2px;
  background-color: #dbe4f0;
}

.esc-det-day-num {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #1a3399;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(26, 51, 153, 0.28);
  position: relative;
  z-index: 1;
}

.esc-det-day-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0c1b48;
  line-height: 1.3;
  margin-bottom: 5px;
}

.esc-det-day-text {
  color: #4a5676;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 0;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   6 + 7. Brochure and enrolment
   -------------------------------------------------------------------------- */
.esc-det-cta {
  background-color: #f7f9fd;
  padding-block: 50px 64px;
}

.esc-det-cta-card {
  background-color: #1a3399;
  background-image: linear-gradient(135deg, #1a3399 0%, #122a80 100%);
  border-radius: 26px;
  padding: 42px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  box-shadow: 0 16px 40px rgba(18, 34, 110, 0.18);
}

.esc-det-cta-heading {
  font-size: 1.9rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 8px;
  text-wrap: balance;
}

.esc-det-cta-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  margin-bottom: 0;
  max-width: 48ch;
}

.esc-det-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.esc-det-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1.02rem;
  font-weight: 800;
  border-radius: 50px;
  padding: 13px 28px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.esc-det-btn-solid {
  background-color: #ffc72c;
  color: #08153e;
  border: 2px solid #ffc72c;
  box-shadow: 0 6px 18px rgba(255, 199, 44, 0.32);
}

.esc-det-btn-solid:hover,
.esc-det-btn-solid:focus-visible {
  background-color: #f2b918;
  border-color: #f2b918;
  color: #06112d;
  transform: translateY(-2px);
}

.esc-det-btn-ghost {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.esc-det-btn-ghost:hover,
.esc-det-btn-ghost:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

/* Sub-headings inside a section. Smaller than the section h2 and tighter to
   the paragraph they introduce, so a section reads as one block rather than as
   several competing headings. */
.esc-det-h3 {
  font-size: 1.35rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.32;
  letter-spacing: -0.2px;
  margin: 26px 0 9px 0;
  max-width: 54ch;
  text-wrap: balance;
}

.esc-det-h3:first-of-type {
  margin-top: 0;
}

@media (min-width: 992px) {
  /* The box keeps its 4:3 rather than stretching to the copy beside it. A
     stretched box cannot match the image's shape, so it either banded the map
     or cropped it; sized to the image, it fits exactly. Any height left in the
     column simply sits under the map link. */
  .esc-det-section .order-lg-1 {
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* The box holds the image's 4:3 rather than stretching, so the column is
       usually taller than the map. Centring sits the map against the middle of
       the copy instead of stranding it at the top over a gap. */
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* "Internship in Urban Design Workshop" needs 725px at 2.6rem, but its column
   gives it 661px at 1280 wide, so it broke to two lines right through the
   common laptop range. 2.2rem brings it to about 613px and it holds one line.
   Deliberately not white-space:nowrap - the longest title in the set,
   "EuroTech 2027-Internship in Mechatronics, Robotics & Automation", needs
   1323px in that column and would run straight off the page. Long names still
   wrap; this one no longer has to. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .esc-det-title {
    font-size: 2.2rem;
  }
}

@media (max-width: 1199px) {
  .esc-det-title {
    font-size: 2.2rem;
  }
  .esc-det-h2 {
    font-size: 1.85rem;
  }
  .esc-det-hero-img {
    height: 360px;
  }
}

@media (max-width: 991px) {
  .esc-det-hero-img {
    height: 300px;
  }
  .esc-det-titlebar-inner {
    align-items: flex-start;
  }
  .esc-det-title {
    font-size: 1.9rem;
  }
  .esc-det-section {
    padding-block: 42px;
  }
  .esc-det-cta-card {
    padding: 32px 26px;
  }
  .esc-det-cta-heading {
    font-size: 1.6rem;
  }
}

@media (max-width: 767px) {
  .esc-det-hero-img {
    height: 230px;
  }
  .esc-det-hero-inner {
    padding-top: 14px;
  }
  .esc-det-back,
  .esc-det-hero-flag {
    font-size: 0.76rem;
    padding: 6px 14px;
  }
  .esc-det-titlebar {
    padding-block: 24px 22px;
  }
  .esc-det-title {
    font-size: 1.55rem;
  }
  .esc-det-university {
    font-size: 0.92rem;
  }

  /* The three facts stop fitting on one line, so they become a row of
     equal thirds rather than wrapping raggedly. */
  .esc-det-facts {
    width: 100%;
  }
  .esc-det-facts li {
    flex: 1 1 0;
    padding: 10px 12px;
    text-align: center;
    align-items: center;
  }
  .esc-det-fact-value {
    font-size: 0.88rem;
    white-space: normal;
  }

  .esc-det-h2 {
    font-size: 1.5rem;
  }
  .esc-det-section {
    padding-block: 34px;
  }
  .esc-det-day {
    gap: 14px;
    padding: 16px 0;
  }
  .esc-det-day-num {
    width: 40px;
    height: 40px;
    font-size: 0.88rem;
  }
  .esc-det-day:not(:last-child)::before {
    left: 19px;
    top: 58px;
  }
  .esc-det-day-title {
    font-size: 1.02rem;
  }
  .esc-det-cta-actions {
    width: 100%;
  }
  .esc-det-btn {
    width: 100%;
    font-size: 0.95rem;
    padding: 12px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .esc-det-btn,
  .esc-det-back,
  .esc-det-maplink {
    transition: none;
  }
  .esc-det-btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Day-wise programme: meta strip, slots, format tags
   -------------------------------------------------------------------------- */

/* The fixed facts about the programme, before the day list itself. Auto-fit so
   the items use the row rather than wrapping raggedly.

   The hairlines between cells used to be the container's own colour showing
   through 1px gaps. That works only while the items fill the grid: five items
   across three columns leave a sixth cell with nothing in it, and that cell
   showed as a block of grey. The lines are drawn by the cells themselves now,
   so a cell that does not exist draws nothing, and the container matches the
   cells rather than contrasting with them. */
.esc-det-meta {
  list-style: none;
  margin: 24px 0 8px 0;
  padding: 0;
  /* Flex, not grid. A grid keeps its columns whatever is in them, so five
     items across four columns left the last row one cell wide against 685px
     of nothing - no longer grey, but still a row three-quarters empty. Flex
     lets whatever lands on the last row stretch across it. */
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background-color: #f7f9fd;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}

.esc-det-meta li {
  /* 190px is the width at which these labels and values stop reading well,
     so it is the basis; past that they share the row equally. */
  flex: 1 1 190px;
  background-color: #f7f9fd;
  /* right and bottom hairlines, each landing in the 1px gap; the ones past
     the last column and row are clipped by the container's overflow */
  box-shadow: 1px 0 0 #e2e8f0, 0 1px 0 #e2e8f0;
  padding: 13px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.esc-det-meta-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #7b88a8;
}

.esc-det-meta-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: #0c1b48;
  line-height: 1.4;
}

.esc-det-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.esc-det-day-head .esc-det-day-title {
  margin-bottom: 0;
}

.esc-det-day-when {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7b88a8;
  white-space: nowrap;
}

/* Each half-day is a three-part row: when, what, and the kind of session. The
   label column is fixed so the descriptions start on a common left edge. */
.esc-det-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.esc-det-slot {
  display: grid;
  grid-template-columns: 86px 1fr auto;
  align-items: start;
  gap: 14px;
}

.esc-det-slot-when {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1a56db;
  letter-spacing: 0.3px;
  padding-top: 2px;
}

.esc-det-slot-text {
  color: #4a5676;
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
}

/* A common min-width turns the tags into one aligned column rather than a
   ragged edge - "Lecture - 2 h" is the widest at 106px, so 112px covers it. */
.esc-det-tag {
  min-width: 112px;
  text-align: center;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 50px;
  white-space: nowrap;
  align-self: start;
}

/* Taught, on site, at the desk, under review, and the close. Four hues plus a
   neutral, so the shape of a week reads before any of it is read. */
.esc-det-tag-lecture { background-color: #e3f1fc; color: #0a5490; }
.esc-det-tag-field   { background-color: #e2f7ed; color: #0a6b4a; }
.esc-det-tag-studio  { background-color: #fcf0da; color: #8a5a00; }
.esc-det-tag-review  { background-color: #ede6fb; color: #52338f; }
.esc-det-tag-closing { background-color: #eef1f6; color: #3c4a6b; }

/* The same 86px label column and 14px gutter the half-day rows use, so the
   value starts on the same left edge as the morning and afternoon text instead
   of hanging off its label. 10px top margin matches the gap between slots. */
.esc-det-day-output {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 14px;
  align-items: baseline;
  margin: 10px 0 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: #0c1b48;
}

.esc-det-output-label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #7b88a8;
}

.esc-det-flex-mark {
  color: #d81f27;
  font-size: 0.72em;
  vertical-align: 1px;
}

.esc-det-footnote {
  margin: 22px 0 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #5c6989;
  font-style: italic;
  max-width: 78ch;
}

@media (max-width: 767px) {
  .esc-det-meta {
    margin-top: 18px;
  }
  .esc-det-meta li {
    padding: 11px 14px;
  }
  /* Three columns stop fitting; the session tag drops under the text. */
  .esc-det-slot {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .esc-det-tag {
    justify-self: start;
    margin-top: 2px;
    min-width: 0;
  }
  .esc-det-day-output {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .esc-det-day-head {
    margin-bottom: 10px;
  }
}

/* --------------------------------------------------------------------------
   Holding page for programmes whose detail content is not written yet
   -------------------------------------------------------------------------- */
.esc-det-soon {
  background-color: #f7f9fd;
  padding-block: 44px 72px;
  min-height: 60vh;
}

.esc-det-soon-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1a56db;
  font-size: 0.86rem;
  font-weight: 800;
  text-decoration: none;
  margin-bottom: 22px;
  transition: gap 0.2s ease;
}

.esc-det-soon-back:hover,
.esc-det-soon-back:focus-visible {
  color: #0d3fa8;
  gap: 13px;
}

.esc-det-soon-card {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 44px 46px;
  max-width: 820px;
  box-shadow: 0 10px 36px rgba(18, 30, 84, 0.05);
}

.esc-det-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: #fcf0da;
  color: #8a5a00;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 50px;
  margin-bottom: 18px;
}

.esc-det-soon-title {
  font-size: 2.2rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.16;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  text-wrap: balance;
}

.esc-det-soon-text {
  color: #4a5676;
  font-size: 1rem;
  line-height: 1.68;
  font-weight: 500;
  margin-bottom: 14px;
  max-width: 62ch;
}

.esc-det-soon-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 26px;
}

/* The solid button is yellow-on-navy elsewhere; here it sits on white, so the
   ghost variant would vanish. WhatsApp green carries the second action. */
.esc-det-btn-wa {
  background-color: #25d366;
  color: #ffffff;
  border: 2px solid #25d366;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.3);
}

.esc-det-btn-wa:hover,
.esc-det-btn-wa:focus-visible {
  background-color: #20ba5a;
  border-color: #20ba5a;
  color: #ffffff;
  transform: translateY(-2px);
}

.esc-det-soon-note {
  margin: 28px 0 0 0;
  padding-top: 22px;
  border-top: 1px solid #eaedf5;
  font-size: 0.92rem;
  color: #5c6989;
  line-height: 1.6;
}

.esc-det-soon-note a {
  color: #1a56db;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 86, 219, 0.3);
}

.esc-det-soon-note a:hover {
  color: #0d3fa8;
  border-bottom-color: #0d3fa8;
}

@media (max-width: 767px) {
  .esc-det-soon {
    padding-block: 28px 44px;
  }
  .esc-det-soon-card {
    padding: 28px 20px;
    border-radius: 18px;
  }
  .esc-det-soon-title {
    font-size: 1.55rem;
  }
  .esc-det-soon-actions {
    width: 100%;
  }
  .esc-det-soon-actions .esc-det-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Touch sizing, below lg
   Two links on this page sat well under a finger: the map link at 23px and the
   back link at 33px. Both are padded to 44px here, which is the usual floor
   for a touch target, without changing how they look on a mouse.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .esc-det-maplink {
    min-height: 44px;
    padding: 10px 2px;
  }

  .esc-det-back {
    min-height: 44px;
    padding: 10px 18px;
  }

  /* The uppercase labels run to 10.6px here, below what is comfortable on a
     phone. Nudged up; they stay smaller than the values they caption. */
  .esc-det-tag,
  .esc-det-output-label {
    font-size: 0.72rem;
  }

  .esc-det-fact-label,
  .esc-det-meta-label {
    font-size: 0.7rem;
  }
}

/* --------------------------------------------------------------------------
   Registration and visa deadlines
   Amber rather than the page's navy: this is the one block on the page that
   is time-critical, and it sits between the title bar and the first section
   where it will be read before anything else. The visa row is marked in red,
   since missing it ends the application regardless of the other two.
   -------------------------------------------------------------------------- */
.esc-det-deadlines {
  background-color: #ffffff;
  padding-block: 0 8px;
}

.esc-det-deadlines-card {
  background-color: #fff8e6;
  border: 1px solid #e0a8ab;
  border-radius: 16px;
  padding: 22px 26px 20px 26px;
  margin-top: 30px;
}

/* The heading flashes, and nothing else does. It is a label - "Important" -
   so a reader loses nothing while it is dim, where the dates below it are
   what they have come to write down and have to stay solid. One cycle a
   second, the same beat as the start-date badges on the home page and well
   inside the three-flashes-a-second limit. */
@keyframes escDeadlineTitleFlash {
  0%, 20% {
    opacity: 1;
  }
  50% {
    opacity: 0.32;
  }
  80%, 100% {
    opacity: 1;
  }
}

/* Anyone who has asked their system for less movement keeps the heading at
   full strength rather than losing the emphasis altogether. */
@media (prefers-reduced-motion: reduce) {
  .esc-det-deadlines-title {
    animation: none;
    opacity: 1;
  }
}

.esc-det-deadlines-title {
  animation: escDeadlineTitleFlash 1s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 1.1rem;
  font-weight: 850;
  color: #a8141b;
  line-height: 1.3;
  margin-bottom: 16px;
}

/* The megaphone follows the words rather than staying amber beside them,
   which would read as a colour someone forgot to change. */
.esc-det-deadlines-title i {
  color: #a8141b;
  font-size: 1.15rem;
}

.esc-det-deadline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 26px;
}

.esc-det-deadline-list li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid #f0dca8;
}

.esc-det-deadline-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #8a6d1f;
}

.esc-det-deadline-date {
  font-size: 1.08rem;
  font-weight: 850;
  color: #0c1b48;
}

.esc-det-deadline-note {
  font-size: 0.8rem;
  font-style: italic;
  color: #7b6a42;
}

.esc-det-deadline-visa {
  border-left-color: #e8a0a4;
}

.esc-det-deadline-visa .esc-det-deadline-label {
  color: #a8141b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* --------------------------------------------------------------------------
   Cost details
   Three payees across a row, each with its line items. Equal columns so the
   three read as one set rather than a hierarchy - the money is what differs
   between them, not their importance.
   -------------------------------------------------------------------------- */
.esc-det-costs {
  list-style: none;
  margin: 0 0 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  align-items: stretch;
}

.esc-det-cost {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border: 1px solid #dce4ef;
  border-radius: 18px;
  padding: 22px 24px 20px 24px;
  box-shadow: 0 6px 20px rgba(18, 30, 84, 0.04);
}

/* Numbered because they are paid in this order, and a reader asked to follow
   three costs does better with somewhere to start. */
.esc-det-cost-num {
  position: absolute;
  top: 18px;
  right: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #eef2fb;
  color: #1a3399;
  font-size: 0.86rem;
  font-weight: 850;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.esc-det-cost-title {
  font-size: 1rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.35;
  margin: 0 40px 10px 0;
  min-height: 2.7em;
}

.esc-det-cost-amount {
  font-size: 1.85rem;
  font-weight: 850;
  color: #0c1b48;
  line-height: 1.1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}

.esc-det-cost-amount small {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  color: #5c6989;
}

/* The working behind the headline figure - what it is made of, or what it is
   an estimate of - so the big number is never unexplained. */
.esc-det-cost-sub {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5c6989;
  margin: -8px 0 14px 0;
}

.esc-det-cost-what {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #4a5676;
  font-weight: 500;
  margin: 0;
}

/* Line items: label left, figure right, so the figures form a column that can
   be read down and added up. */
/* Top-aligned, not bottom-aligned. The auto top margin pushed each list to
   the foot of its card, which only showed when a card had fewer rows than
   its neighbours: card 2 opened with 53px of white under its heading where
   the others had 10px. Any slack now falls to the bottom of the card, where
   it reads as the card being roomy rather than the heading being adrift. */
.esc-det-cost-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #eaedf5;
}

.esc-det-cost-lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid #eaedf5;
}

.esc-det-cost-lines li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.esc-det-cost-lines span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0c1b48;
  line-height: 1.4;
}

.esc-det-cost-lines em {
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 500;
  color: #5c6989;
}

.esc-det-cost-lines b {
  font-size: 0.92rem;
  font-weight: 850;
  color: #0c1b48;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The only line in the section that says what the fees do NOT cover, so it
   sits directly under the two that say what they do, before the list of
   inclusions can suggest the figures above are the whole bill. Not italic:
   the section dropped italics earlier and this would be the only one left. */
.esc-det-cost-note {
  margin: 0 0 26px 0;
  font-size: 1.15rem;
  line-height: 1.55;
  font-weight: 700;
  /* Orange, but a deep one: the brighter oranges land near 3.4:1 on this
     section's tint, under the 4.5 this size and weight still needs. */
  color: #c2410c;
}

/* The asterisk is the same red as the sentence now, so weight alone is what
   keeps it distinct. */
.esc-det-cost-note-mark {
  font-weight: 850;
  margin-right: 2px;
}

.esc-det-covers-title {
  margin-top: 0;
}

.esc-det-included {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 10px 24px;
}

.esc-det-included li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 500;
  color: #4a5676;
  line-height: 1.45;
}

.esc-det-included i {
  color: #27ae7c;
  font-size: 0.98rem;
  line-height: 1.4;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .esc-det-deadlines-card {
    padding: 18px 16px 16px 16px;
    margin-top: 22px;
  }
  .esc-det-deadlines-title {
    font-size: 1rem;
  }
  .esc-det-cost {
    padding: 18px 18px 16px 18px;
  }
  .esc-det-cost-amount {
    font-size: 1.6rem;
  }
  .esc-det-cost-title {
    min-height: 0;
  }
}

/* --------------------------------------------------------------------------
   FAQ
   An inline link rather than a button: the underline runs with the text and
   wraps with it, so a line that breaks over three lines on a phone still
   reads as one clickable sentence. The icons sit outside the anchor, which
   keeps them out of the underline and out of the accessible name.
   -------------------------------------------------------------------------- */
.esc-det-faq-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  max-width: 68ch;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.7;
}

.esc-det-faq-line .bi-filetype-pdf {
  font-size: 1.3rem;
  line-height: 1;
  color: #d81f27;
  flex-shrink: 0;
}

.esc-det-faq-link {
  flex: 0 1 auto;
  min-width: 0;
  /* One short line is only 28px of text; the padding brings the hit area up
     to a thumb-sized target without moving the underline, which is measured
     from the baseline. */
  padding-block: 8px;
  font-weight: 700;
  color: #1a56db;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(26, 86, 219, 0.32);
  text-underline-offset: 5px;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.esc-det-faq-link:hover,
.esc-det-faq-link:focus-visible {
  color: #122a80;
  text-decoration-color: #122a80;
}

/* Back beside the link now the label is three words: at that length the two
   sit on one line without the hint stranding out to the right of nothing. */
.esc-det-faq-hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #7b88a8;
}

@media (max-width: 767px) {
  .esc-det-faq-line {
    font-size: 0.98rem;
  }
}

/* ==========================================================================
   Responsive corrections
   Measured at 320, 375, 768 and 1024px. Appended so each rule wins over the
   breakpoint block that set the same property earlier in this file.
   ========================================================================== */

/* --- Fact strip, 768-1199px ------------------------------------------------
   "Starts on / Duration / Tuition" needed 380px inside a 351px box, and the
   strip clips its overflow, so the third value was cut off. Below 768px the
   value is already allowed to wrap; this extends that, and takes the side
   padding back, so the row fits without shrinking the type. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .esc-det-facts li {
    padding: 11px 12px;
  }

  .esc-det-fact-value {
    white-space: normal;
  }
}

/* --- Touch targets ---------------------------------------------------------
   Both back links were text-sized: 39px on the detail page, 22px on the
   holding page, against a 44px floor. */
@media (max-width: 1199.98px) {
  .esc-det-back {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (max-width: 1199.98px) {
  .esc-det-soon-back {
    padding: 11px 0;
    margin-bottom: 11px;
  }
}

/* --- Small type ------------------------------------------------------------
   11.5px is the floor. These labels ran 10.6-11.2px depending on the band,
   and the asterisk marking a flexible session was 10.9px, where a single
   red glyph is easy to miss entirely. The eyebrows at 11.8px are left
   alone - bold capitals hold up at that size. */
@media (max-width: 1199.98px) {
  .esc-det-flex-mark,
  .esc-det-fact-label,
  .esc-det-meta-label,
  .esc-det-tag,
  .esc-det-output-label,
  .esc-det-day-when {
    font-size: 11.5px;
  }
}

/* --------------------------------------------------------------------------
   Placeholder copy
   Deliberately unlovely. Text waiting to be written should not be able to
   pass for text that has been: the dashed rule and the flat grey are there
   so nobody reviews this page and takes the filler for finished copy.
   Remove the class, not the rule, as each block is filled.
   -------------------------------------------------------------------------- */
.esc-det-placeholder {
  color: #8b93a7;
  border-left: 3px dashed #c3cbdd;
  padding-left: 14px;
  font-style: normal;
}

/* --------------------------------------------------------------------------
   Day detail
   The Hungary brochures give each day one line of detail under its title,
   where the Urban Design programme splits its days into morning, afternoon
   and an output. That line is not an output, so it does not borrow the
   labelled Output row - which is a two-column grid and would squeeze this
   text into the narrow column the label usually fills.
   -------------------------------------------------------------------------- */
.esc-det-day-detail {
  margin: 6px 0 0 0;
  /* The same size, weight and colour as the title above it, so a day reads
     as one block of text rather than a heading with a caption. */
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 800;
  color: #0c1b48;
}

/* The phone step-down has to live here rather than in the breakpoint block
   above: this rule comes later in the file, so anything set up there for the
   same selector loses to it whatever the media query says. */
@media (max-width: 767px) {
  .esc-det-day-detail {
    font-size: 1.02rem;
  }
}