/* ==========================================================================
   Customer support page - Figma node 7066:327.

   Three blocks: the request form beside a photo, the people to call, and a
   carousel of nearby hotels. Loaded only on template-support.php.

   Everything shared lives in the global layer: the form is built from
   forms.css (including the country picker), the buttons from buttons.css and
   the section headings from typography.css. This file only places those
   blocks and styles the two components that exist nowhere else - the person
   card and the hotel card.
   ========================================================================== */

/* --- Page title + form ----------------------------------------------------
   The heading sits above the section stack rather than inside a section, so it
   brings its own top padding; the gap under it is the first section's own. */
.support__head {
  padding-top: calc(var(--space-section) / 2);
}

.support__title {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-normal);
  text-align: center;
  text-transform: uppercase;
  color: var(--c-ink);
}

.support__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: start;
}

@media (min-width: 1024px) {
  .support__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The submit sits under the fields on the left, not to the right as it does
   on the visitor page. */
.support-form .form-actions {
  justify-content: flex-start;
}

/* The design lays the four support types out two by two. */
@media (min-width: 480px) {
  .support-form__types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-form__types > .choice {
    min-width: 0;
  }
}

.support__media {
  overflow: hidden;
  border-radius: var(--radius-md);
}

/* Stacked there is nothing to match, so the photo keeps the design's ratio. */
.support__photo,
.support__media.placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 891 / 511;
  object-fit: cover;
  background: var(--c-media-placeholder);
}

/* Side by side it matches the form instead - the one place on the site where
   the row decides a picture's height, and deliberate. object-fit keeps that a
   crop rather than a stretch, so nothing in the photo is distorted.

   The photo has to leave the flow for this to work. A stretched grid item is
   still sized by its content, so an in-flow img with height:100% resolves
   against an indefinite height, falls back to its intrinsic pixel height and
   drags the whole row down to 2248px. Out of flow it contributes nothing: the
   row is the form's height and the photo fills whatever that turns out to be. */
@media (min-width: 1024px) {
  .support__grid {
    align-items: stretch;
  }

  .support__media {
    position: relative;
  }

  .support__photo {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .support__media.placeholder {
    aspect-ratio: auto;
  }
}

/* --- People to call -------------------------------------------------------- */
.support-contacts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 1200px) {
  .support-contacts__grid {
    grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  }
}

.support-contacts__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .support-contacts__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.person-card {
  display: flex;
  align-items: stretch;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
}

.person-card__photo {
  flex: none;
  width: 120px;
}

/* The portraits are pre-cropped to the design's 120 x 140 frame (6:7), so the
   box keeps that ratio at every width and the photo fills it without being
   stretched. */
.person-card__img {
  --media-ratio: 6 / 7;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xs);
  background: none;
  object-fit: cover;
}

.person-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  min-width: 0;
  padding-top: var(--space-3xs);
}

.person-card__tag {
  align-self: flex-start;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--c-primary-soft);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--c-primary-deep);
}

.person-card__name {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--c-ink-card);
}

.person-card__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person-card__lines li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.person-card__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
}

.person-card__value {
  min-width: 0;
  overflow: hidden;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-overflow: ellipsis;
  color: var(--c-ink-muted);
  text-decoration: none;
}

a.person-card__value:hover {
  color: var(--c-primary);
}

/* --- Nearby hotels --------------------------------------------------------- */
.support-hotels__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);

  @media (min-width: 768px) {
    flex-wrap: nowrap;
  }
}

.support-hotels__nav {
  display: flex;
  gap: var(--space-md);
}

/* The support page draws its arrows as outlined circles rather than the
   filled artwork the home page carousel uses. */
.carousel-nav--outline {
  width: 48px;
  height: 48px;
  border: 1px solid var(--c-ink-ocean);
  border-radius: var(--radius-pill);
}

.carousel-nav--outline img {
  width: 8px;
  height: 12px;
}

/* How many cards fit is declared on the element (slides-per-view +
   breakpoints), so a slide must not carry a width of its own. */
.support-hotels__carousel .swiper-slide {
  height: auto;
}

/* Without Swiper the wrapper is a plain scrolling row, and then the cards do
   need a width or they collapse onto their content. */
vnf-carousel[data-fallback] .hotel-card {
  flex: 0 0 min(432px, 46vw);
}

.hotel-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-surface);
}

.hotel-card__media {
  position: relative;
  background: var(--c-media-placeholder);
}

.hotel-card__photo {
  --media-ratio: 432 / 256;
}

.hotel-card__rating {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--c-glass);
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow-float);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-ink-meta);
}

.hotel-card__rating img {
  width: 14px;
  height: 14px;
}

.hotel-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);

  @media (min-width: 768px) {
    gap: var(--space-lg);
  }
}

.hotel-card__name {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--c-ink-meta);
}

.hotel-card__distance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
  padding-bottom: var(--space-md);
  border-bottom: 1px dashed var(--c-border-light);
}

.hotel-card__landmark {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  font-weight: var(--fw-medium);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  color: var(--c-ink-muted);
}

.hotel-card__landmark img {
  flex: none;
  width: 11px;
  height: 16px;
}

.hotel-card__km {
  flex: none;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-label);
  color: var(--c-ink-meta);
}

/* --- Entrance --------------------------------------------------------------
   The page title and every direct child of each section's container (the
   form and its photo, the contacts heading and list, the hotels heading and
   carousel) reveal on their own as they scroll into view. Keyframes rather
   than a transition so nothing already animating on these blocks is replaced;
   `reveal-up` is defined in home.css. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .support [data-reveal]:not(.is-revealed),
  .has-reveal .support__head[data-reveal]:not(.is-revealed),
  .has-reveal .support-contacts [data-reveal]:not(.is-revealed),
  .has-reveal .support-hotels [data-reveal]:not(.is-revealed) {
    opacity: 0;
  }

  .has-reveal .support [data-reveal].is-revealed,
  .has-reveal .support__head[data-reveal].is-revealed,
  .has-reveal .support-contacts [data-reveal].is-revealed,
  .has-reveal .support-hotels [data-reveal].is-revealed {
    animation: reveal-up var(--reveal-dur) var(--ease) backwards;
  }
}

/* <vnf-carousel> is an unknown element, so it is inline by default, and a
   transform does not apply to an inline box - without this the reveal above
   only fades it. */
.support-hotels__carousel {
  display: block;
}