/*
 * Africa Made Easy enquiry composition
 * Shared by Travel Styles and Signature Journey pages.
 * This file changes layout only; form controls and submission behaviour remain page-owned.
 */

.ame-itinerary-enquire-new,
.ame-itinerary-enquire-new *,
.ame-itinerary-enquire-new *::before,
.ame-itinerary-enquire-new *::after {
  box-sizing: border-box;
}

.ame-itinerary-enquire-new .ame-enquire-media {
  overflow: hidden !important;
}

.ame-itinerary-enquire-new .ame-enquire-media > img,
.ame-itinerary-enquire-new .ame-enquire-media > video,
.ame-itinerary-enquire-new .ame-enquire-image {
  display: block;
  width: 100% !important;
  object-fit: cover !important;
}

/*
 * Full-size laptop and desktop: keep the consultation form at a deliberate,
 * readable measure and give any remaining width to the editorial image.
 */
@media (min-width: 1200px) {
  .ame-itinerary-enquire-new {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    width: calc(100% - clamp(48px, 6vw, 120px)) !important;
    max-width: 1480px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: visible !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel {
    flex: 0 0 clamp(620px, 43vw, 680px) !important;
    width: auto !important;
    max-width: none !important;
    padding: clamp(44px, 3.3vw, 56px) clamp(24px, 2.2vw, 36px) !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel > form:not([hidden]) {
    width: 100% !important;
    max-width: 600px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media {
    align-self: flex-start !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 720px !important;
    height: clamp(720px, calc(100svh - var(--ame-enquire-sticky-top, 88px)), 900px) !important;
    position: sticky !important;
    top: var(--ame-enquire-sticky-top, 88px) !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media > img,
  .ame-itinerary-enquire-new .ame-enquire-media > video,
  .ame-itinerary-enquire-new .ame-enquire-image {
    height: 100% !important;
    min-height: 720px !important;
  }

  .ame-itinerary-enquire-new .ame-field {
    margin-bottom: 18px !important;
  }
}

html[data-ame-kind="journey"] .ame-itinerary-enquire-new {
  --ame-enquire-sticky-top: 140px;
}

/* Form labels were previously only 10px, which was too small on laptop screens. */
.ame-itinerary-enquire-new form:not([hidden]) label,
.ame-itinerary-enquire-new form:not([hidden]) legend,
.ame-itinerary-enquire-new form:not([hidden]) .ame-label {
  font-size: 11px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.14em !important;
}

.ame-itinerary-enquire-new form:not([hidden]) input:not([type="hidden"]),
.ame-itinerary-enquire-new form:not([hidden]) select,
.ame-itinerary-enquire-new form:not([hidden]) textarea {
  font-size: 14px !important;
}

/*
 * Tablet and compact landscape screens: a centred stacked composition avoids
 * squeezing either the form or the image into an undersized column.
 */
@media (min-width: 901px) and (max-width: 1199px) {
  .ame-itinerary-enquire-new {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: calc(100% - 48px) !important;
    max-width: 900px !important;
    min-height: 0 !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
    overflow: hidden !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media {
    order: 1 !important;
    width: 100% !important;
    min-height: clamp(360px, 42vw, 460px) !important;
    height: clamp(360px, 42vw, 460px) !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media > img,
  .ame-itinerary-enquire-new .ame-enquire-media > video,
  .ame-itinerary-enquire-new .ame-enquire-image {
    height: 100% !important;
    min-height: 100% !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: 48px clamp(48px, 7vw, 72px) !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel > form:not([hidden]) {
    width: 100% !important;
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}

/* All enquiry pages use the same calm, single-column mobile composition. */
@media (max-width: 900px) {
  .ame-itinerary-enquire-new,
  .ame-enquire-classic-cape {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media,
  .ame-enquire-classic-cape .ame-enquire-media {
    order: 1 !important;
    width: 100% !important;
    min-height: clamp(300px, 78vw, 380px) !important;
    height: clamp(300px, 78vw, 380px) !important;
    position: relative !important;
    top: auto !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-media > img,
  .ame-itinerary-enquire-new .ame-enquire-media > video,
  .ame-enquire-classic-cape .ame-enquire-media > img,
  .ame-enquire-classic-cape .ame-enquire-media > video {
    height: 100% !important;
    min-height: 100% !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel,
  .ame-enquire-classic-cape .ame-enquire-panel {
    order: 2 !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: clamp(30px, 8vw, 44px) clamp(24px, 7vw, 40px) !important;
  }

  .ame-itinerary-enquire-new .ame-enquire-panel > form:not([hidden]) {
    width: 100% !important;
    max-width: 620px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }
}