/* =====================================================================
   TRIWAYS — MEDICAL TOURISM IN EGYPT  (/experiences/egypt-medical-tourism/)
   Loaded after triways-experiences-inside.css.
   Prefix: tv-md-   Scope: <body class="hub-page tv-xp tv-md">

   The page is built from the shared tv-xp- components. This file only
   holds what is particular to it:

     .tv-md-em        the italic brass phrase inside a heading (styling only)
     .tv-md-hero      the Nile terrace photograph, scrim weighted left and low
     .tv-md-facts     the three hero facts in one row, hairlines between
     .tv-md-answer    the hero answer on a brass left rule, no panel
     .tv-md-practical .tv-xp-feature--text-first, the caption on a short rule
     .tv-md-rows      .tv-xp-rows with a fourth column: the link, right-aligned
     .tv-md-enquiry   the "Planning for yourself?" note as an outlined panel
     .tv-md-form      .tv-xp-form with outlined fields

   Nothing here styles the header, the navigation or the footer.
   ===================================================================== */

.tv-md { --tv-md-gold-hi: #D4B483; }   /* the button's hover: one step lighter than --tv-xp-gold */

.tv-md-em { font-style: italic; color: var(--tv-xp-gold); }
.tv-md .hb-section--ivory .tv-md-em { color: var(--tv-brass-text); }   /* 4.9:1 on ivory */

/* ---------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------- */
/* The picture is held to its right edge: the daybed stays in frame and the felucca sails between the
   title and the answer. */
.tv-md-hero { min-height: clamp(39rem, 84vh, 48rem); --tv-xp-hero-pos: 100% 50%; }
.tv-md-hero::before {
  background:
    linear-gradient(90deg, rgba(var(--tv-scrim), 0.86) 0%, rgba(var(--tv-scrim), 0.66) 32%, rgba(var(--tv-scrim), 0.3) 56%, rgba(var(--tv-scrim), 0.36) 100%),
    linear-gradient(180deg, rgba(var(--tv-scrim), 0.3) 0%, rgba(var(--tv-scrim), 0.06) 20%, rgba(var(--tv-scrim), 0.14) 34%, rgba(var(--tv-scrim), 0.74) 50%, rgba(var(--tv-scrim), 0.9) 100%);
}
.tv-md-hero .hub-crumbs li, .tv-md-hero .hub-crumbs [aria-current="page"] { color: rgba(244, 240, 232, 0.94); }   /* the current page stays above 4.5:1 on the sky */
.tv-md-hero .hub-hero__title { font-size: clamp(2.7rem, 1.5rem + 4.6vw, 5rem); line-height: 1.04; }
.tv-md-hero .hub-hero__title .tv-md-em { display: block; }
.tv-md-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }

.tv-md-facts dt { color: var(--tv-xp-gold); }
.tv-md-facts dd { font-style: italic; color: rgba(255, 255, 255, 0.94); }
.tv-md-facts > div { border-top-color: var(--tv-xp-rule-dark); }
@media (min-width: 640px) {
  .tv-md-hero .tv-md-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; max-width: none; }
  .tv-md-facts > div { padding: 0.15rem clamp(1.1rem, 2vw, 1.75rem) 0.25rem; border-top: 0; border-left: 1px solid var(--tv-xp-rule-dark); }
  .tv-md-facts > div:first-child { padding-left: 0; border-left: 0; }
  .tv-md-facts dt { margin-bottom: 0.45rem; }
  .tv-md-facts dd { font-size: 1.22rem; }
}

.tv-md-hero .tv-md-answer {
  padding: 0.2rem 0 0.3rem clamp(1.25rem, 2.2vw, 1.9rem);
  border: 0; border-left: 1px solid var(--tv-xp-gold);
  background: none;
}
.tv-md-answer p { color: rgba(244, 240, 232, 0.95); text-shadow: 0 1px 18px rgba(var(--tv-scrim), 0.6); }
.tv-md-answer .art-named { margin-top: 1.4rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; color: var(--tv-xp-gold); }
.tv-md-answer .art-named li::after { color: var(--tv-xp-gold); }

/* ---------------------------------------------------------------------
   PRACTICAL — copy left, the photograph right, cropped near-square on the
   traveller (4:3 once the columns stack).
   ------------------------------------------------------------------- */
.tv-md-practical { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
.tv-md-practical .hb-heading--h2 .tv-md-em { display: block; }
.tv-md-practical .art-prose__lead { max-width: 26ch !important; color: var(--hb-ink) !important; }
.tv-md-practical .tv-xp-feature__media img { aspect-ratio: 1 / 1; object-position: 34% 50%; }
.tv-md-practical .tv-xp-feature__media figcaption { display: flex; align-items: center; gap: 1rem; margin-top: 1.1rem; color: var(--tv-brass-text); }
.tv-md-practical .tv-xp-feature__media figcaption::before { content: ""; flex: 0 0 46px; height: 1px; background: var(--hb-gold); }

/* ---------------------------------------------------------------------
   WHAT WE ARRANGE — label | name | description | link.
   The link is the last thing in each paragraph; the paragraph is a
   two-column grid, so every link starts and ends on the same edges.

   <ol class="art-register tv-xp-rows tv-md-rows" role="list">
     <li class="art-register__row">
       <div><span class="art-register__tag">…</span><h3 class="art-register__name">…</h3></div>
       <div class="art-prose"><p>Description.
         <span class="tv-md-go"><span class="visually-hidden">See </span><a href>Name</a><span class="visually-hidden">.</span></span></p></div>
     </li>
   </ol>
   ------------------------------------------------------------------- */
.tv-md .hb-intro:has(+ .tv-md-rows) .hb-heading { text-wrap: balance; }
.tv-md-rows .art-register__name { font-size: clamp(1.5rem, 1.2rem + 0.9vw, 1.95rem); }
.tv-md .tv-md-rows .tv-md-go a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0 0 0.5rem; border-bottom: 1px solid var(--tv-xp-gold);
  font-size: 0.9rem; font-weight: 500; line-height: 1.75rem; letter-spacing: 0.02em; color: var(--tv-xp-gold);
  transition: color 0.25s var(--hb-ease), border-color 0.25s var(--hb-ease);
}
.tv-md-rows .tv-md-go a::after { content: "\2192"; content: "\2192" / ""; transition: transform 0.25s var(--hb-ease); }
.tv-md .tv-md-rows .tv-md-go a:hover, .tv-md .tv-md-rows .tv-md-go a:focus-visible { color: #fff; border-color: #fff; }
.tv-md-rows .art-register__row:hover .tv-md-go a::after, .tv-md-rows .tv-md-go a:focus-visible::after { transform: translateX(4px); }
@media (min-width: 1024px) {
  .tv-md-rows .art-register__row {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 3.4fr) minmax(0, 7.3fr);
    position: relative; isolation: isolate;
  }
  /* the tint runs a little wider than the row; the hairlines keep the width of the column */
  .tv-md-rows .art-register__row::before { content: ""; position: absolute; inset: 0 -0.9rem; z-index: -1; background: rgba(201, 169, 106, 0.07); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--hb-ease); }
  .tv-md-rows .art-register__row:hover::before { opacity: 1; }
  .tv-md-rows .art-prose p { display: grid; grid-template-columns: minmax(0, 1fr) 13.5rem; column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; max-width: none; }
}
@media (max-width: 1023.98px) {
  .tv-md-rows .tv-md-go { display: block; margin-top: 1.1rem; }
  .tv-md .tv-md-rows .tv-md-go a { display: inline-flex; min-width: min(15rem, 100%); padding-top: 0.35rem; }
}

/* ---------------------------------------------------------------------
   ENQUIRY
   ------------------------------------------------------------------- */
.tv-md-enquiry .art-enquiry__aside {
  margin-top: 1.75rem; padding: 1rem 1.2rem 1.05rem;
  border: 1px solid var(--tv-xp-rule-dark); border-radius: 2px;
  color: rgba(244, 240, 232, 0.8);
}
.tv-md-enquiry .art-enquiry__aside a { display: inline; padding-block: 0; color: var(--tv-xp-gold); border-bottom-color: var(--tv-xp-rule-dark); }

.tv-md-form { gap: 1.35rem clamp(1.1rem, 2.2vw, 1.6rem); }
.tv-md-form label { margin-bottom: 0.55rem; }
.tv-md-form label:has(+ :required)::after { content: " *"; content: " *" / ""; color: var(--tv-xp-gold); }
.tv-md .tv-md-form input, .tv-md .tv-md-form select, .tv-md .tv-md-form textarea {
  min-height: 3.1rem; padding: 0.7rem 0.9rem;
  border: 1px solid rgba(244, 240, 232, 0.3); border-radius: 2px;
  background-color: rgba(244, 240, 232, 0.03);
}
.tv-md .tv-md-form textarea { min-height: 7.5rem; }
.tv-md .tv-md-form select { background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; padding-right: 2.25rem; }
@supports (appearance: base-select) {
  .tv-md .tv-md-form select { padding-right: 0.9rem; }
}
.tv-md .tv-md-form input:hover, .tv-md .tv-md-form select:hover, .tv-md .tv-md-form textarea:hover { border-color: rgba(201, 169, 106, 0.75); }
.tv-md .tv-md-form input:focus-visible, .tv-md .tv-md-form select:focus-visible, .tv-md .tv-md-form textarea:focus-visible { outline: 2px solid var(--tv-xp-gold); outline-offset: 2px; border-color: var(--tv-xp-gold); }
.tv-md .tv-md-form input:user-invalid, .tv-md .tv-md-form select:user-invalid { border-color: #e0a89a; }
.tv-md-form .tv-xp-btn:hover, .tv-md-form .tv-xp-btn:focus-visible { border-color: var(--tv-md-gold-hi); background: var(--tv-md-gold-hi); color: var(--hb-ink); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .tv-md-hero { min-height: 0; }
  .tv-md-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tv-md-practical { grid-template-columns: minmax(0, 1fr); }
  .tv-md-practical .tv-xp-feature__media { max-width: 40rem; }
  .tv-md-practical .tv-xp-feature__media img { aspect-ratio: 4 / 3; }
}
@media (max-width: 767.98px) {
  /* The photograph is a band behind the title; the facts and the answer sit on solid ink below it. */
  .tv-md-hero { --tv-md-band: 23rem; --tv-xp-hero-pos: 50% 50%; }
  .tv-md-hero .tv-xp-hero__media img { inset: 0 0 auto 0; height: var(--tv-md-band); }
  .tv-md-hero::before {
    background: linear-gradient(180deg, rgba(21, 21, 21, 0.7) 0, rgba(21, 21, 21, 0.66) 7.25rem, rgba(21, 21, 21, 0.16) 9.5rem, rgba(21, 21, 21, 0.3) 13.5rem, rgba(21, 21, 21, 0.9) 19.5rem, var(--hb-ink) var(--tv-md-band));
  }
  .tv-md-hero > .hb-wrap > nav { margin-bottom: 9rem; }
  .tv-md-answer p { text-shadow: none; }
}
@media (max-width: 639.98px) {
  /* .art-standing turns each fact into a label | value row here */
  .tv-md-hero .tv-md-facts { row-gap: 0; }
  .tv-md-facts > div { padding-block: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-md-rows .art-register__row::before, .tv-md .tv-md-rows .tv-md-go a, .tv-md-rows .tv-md-go a::after { transition: none !important; }
  .tv-md-rows .art-register__row:hover .tv-md-go a::after, .tv-md-rows .tv-md-go a:focus-visible::after { transform: none !important; }
}