/* The CMS's own styling: the page builder's canvas in the back office, and the blocks a
   published page renders. Colours come from Bootstrap variables and the --cms-* custom
   properties below, so an application can restyle without touching this file. */

/* The picture in the media library's first column. Fixed height so rows stay level whatever
   the aspect ratio, and capped width so a panorama does not push the other columns aside. */
.media-thumbnail {
  height: 3rem;
  max-width: 6rem;
  width: auto;
  object-fit: cover;
}

.media-thumbnail-missing {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 0.5rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
}

/* The page builder's palette of rows and blocks to drag from, opened over the canvas by its button.
   Hidden with visibility rather than display, so closing it mid-drag leaves Kendo's drag intact. */
.cms-palette-anchor {
  position: relative;
  margin-bottom: 1rem;
}

.cms-palette {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 1010;
  width: 22rem;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.75rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  visibility: hidden;
}

.cms-palette-open .cms-palette {
  visibility: visible;
}

.cms-palette-heading {
  margin-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.cms-palette-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cms-palette-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
  text-align: start;
  cursor: grab;
}

.cms-palette-item:hover,
.cms-palette-item:focus-visible {
  border-color: var(--bs-primary);
}

/* The block types as tiles, three to a row. */
.cms-palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.cms-palette-tile {
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: break-word;
}

.cms-palette-tile i {
  font-size: 1.25rem;
}

/* A floor, so an empty zone is still a drop target for a row. */
.cms-zone {
  min-height: 5rem;
}

.cms-zone-heading {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.cms-zone-body-placeholder {
  margin: 1rem 0 1.5rem;
  padding: 1.5rem;
  border: 2px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
  text-align: center;
}

/* A container is one row of the page, a slot is one of its columns, and a block is a card
   stacked inside a slot. */
.cms-container {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  margin-bottom: 1rem;
}

.cms-container-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--bs-secondary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}

/* The row preview shown while the eye icon is hovered: the real page, scaled down. */
.cms-row-preview {
  position: fixed;
  z-index: 1080;
  width: min(900px, calc(100vw - 16px));
  overflow: hidden;
  pointer-events: none;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
}

.cms-row-preview iframe {
  display: block;
  width: 1200px;
  border: 0;
  transform: scale(0.75);
  transform-origin: 0 0;
}

.cms-row-preview-loading {
  height: 8rem;
}

.cms-container-body {
  padding: 0.75rem;
}

/* A floor, so a slot is never zero-height and therefore undroppable. The empty state gets its
   real height from the placeholder inside it. */
.cms-slot {
  min-height: 2rem;
}

/* Shown only while the clipboard holds something they can paste (cms-builder.js). */
.cms-paste-block,
.cms-paste-container {
  display: none;
}

body[data-cms-clipboard="block"] .cms-paste-block,
body[data-cms-clipboard="container"] .cms-paste-container {
  display: inline-flex;
  align-items: center;
}

.cms-paste-block {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.cms-paste-container {
  margin-bottom: 1rem;
}

.cms-clipboard {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--bs-primary-border-subtle);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-primary-bg-subtle);
  font-size: 0.875rem;
}

/* Transparent to the cursor: Kendo Sortable only offers an empty container as a drop target when
   the element under the cursor is the container itself, and this placeholder fills it. */
.cms-slot-empty,
.cms-canvas-empty {
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-secondary-color);
}

.cms-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/* Title on up to two lines with the block type beneath it, so a narrow column still shows most of it. */
.cms-block-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.cms-block-label {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.cms-block-type {
  overflow: hidden;
  color: var(--bs-secondary-color);
  font-size: 0.8125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms-container-handle,
.cms-block-handle {
  cursor: grab;
  color: var(--bs-secondary-color);
}

/* A block card in its own dark background colour keeps its label, type and actions readable. */
.cms-block-dark {
  color: #fff;
}

.cms-block-dark :is(.cms-block-type, .cms-block-handle) {
  color: rgba(255, 255, 255, 0.8);
}

.cms-block-dark .btn-outline-secondary {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.6);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.2);
  --bs-btn-hover-border-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgba(255, 255, 255, 0.3);
}

/* Where a dragged block will land. Kendo Sortable puts this in place of the dragged card. */
.cms-block-placeholder {
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border: 1px dashed var(--bs-primary);
  border-radius: var(--bs-border-radius);
}

/* Groups of form fields stacked full width, each with its fields in two columns on a wider screen. */
@media (min-width: 576px) {
  .cms-fieldset-grid > fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    align-items: start;
  }
}

/* The chosen image on a form - the media field and the upload form both use it. A fixed height,
   so neither the picture's shape nor the absence of one resizes the popup around it. */
.media-field-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
  padding: 0.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
  overflow: hidden;
}

/* Empty is a placeholder, not an unfinished control: the flat tint with the words in it that a
   trip without a photo gets in the overview (.schedule-thumbnail-empty). */
.media-field-preview.is-empty {
  background-color: var(--bs-secondary-bg);
}

/* Dimmed while the chosen file is on its way up; the field's buttons are disabled alongside it. */
.media-field-preview.is-uploading {
  opacity: 0.5;
}

.media-field-preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.media-field-empty {
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
  text-align: center;
}

/* aria-disabled instead of disabled/.disabled, which both set pointer-events: none and would
   swallow the hover its title needs to reach as a Kendo tooltip. */
.media-field [aria-disabled="true"] {
  opacity: var(--bs-btn-disabled-opacity);
  cursor: not-allowed;
}

.media-field-name {
  font-size: 0.875rem;
  margin-top: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The crop dialog (_MediaCrop.cshtml). Croppie appends the crop boundary and the zoom slider as
   siblings inside this element, so it has to stack them instead of leaving flex's default row
   direction to squeeze the boundary and strand the slider beside it. */
.media-crop-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Croppie's own stylesheet borders the crop frame in white, which the popup's light background
   swallows - the editor could not see where the frame actually was. */
.media-crop-stage .cr-viewport,
.media-crop-stage .cr-resizer {
  border-color: var(--bs-primary);
}

/* The picker's tiles (_MediaPicker.cshtml). The ListView wraps them itself, so the spacing sits
   on the tile rather than on a container whose markup is Kendo's to change. */
.media-tile {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 9rem;
  margin: 0 0.75rem 0.75rem 0;
  padding: 0.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.media-tile:hover,
.media-tile:focus-visible {
  border-color: var(--bs-primary);
}

.media-tile img {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  border-radius: var(--bs-border-radius-sm);
}

.media-tile-name {
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The card that follows the cursor while dragging. */
.cms-drag-hint {
  opacity: 0.85;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

/* CMS display styles. These are the block and row variants an editor can pick from
   DisplayStyles; until the front office theme lands (step 8) they are neutral placeholders
   rather than the Carint brand colours. */
.cms-tinted {
    background-color: var(--cms-tint-color, #44C0E8);
    padding: 1rem;
    border-radius: var(--bs-border-radius);
}

.cms-bordered {
  border: 1px solid var(--bs-border-color);
  padding: 1rem;
  border-radius: var(--bs-border-radius);
}

.cms-width-narrow {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Breaks out of the centered .container, edge to edge with the browser. Scoped to the public page
   - the back-office canvas reuses this markup in a fluid layout, where it would run under the sidebar. */
.cms-page-content .cms-width-wide,
.cms-page-content .cms-width-band {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Padding and ContentPadding are free rem amounts the editor types in, so they render as inline
   style (ContainerStyleExtensions.ToInlineStyle) rather than a fixed CSS class here. */
.cms-row.cms-tinted,
.cms-row.cms-bordered,
.cms-container.cms-tinted,
.cms-container.cms-bordered {
  padding: 0;
}

.cms-row.cms-bottom-bar {
  text-align: center;
}

/* Scoped to the published row: in the builder the row's menus are lists too. */
.cms-row.cms-bottom-bar ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  margin: 0;
}

.cms-row.cms-bottom-bar p {
  margin: 0;
}

/* Space between columns once they wrap below each other. */
.cms-row > .row,
.cms-row > .container > .row {
  row-gap: 1.5rem;
}

/* A picture inserted into rich text carries its width, but never runs past its column. */
.cms-page-content p img,
.cms-page-content li img {
  max-width: 100%;
  height: auto;
}

/* Bootstrap's figure gets a 1rem bottom margin by default - below an Image block that is just an
   uncontrolled gap the Padding field above is meant to own instead. */
.cms-page-content figure {
  margin-bottom: 0;
}

.cms-card {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 1rem;
  height: 100%;
}

.cms-highlight {
  border-left: 0.25rem solid var(--bs-primary);
  padding-left: 0.75rem;
}

.cms-text-normal {
  font-weight: 400;
  font-style: normal;
}

.cms-text-bold {
  font-weight: 700;
}

.cms-text-italic {
  font-style: italic;
}

.cms-text-bold-italic {
  font-weight: 700;
  font-style: italic;
}

.cms-text-uppercase {
  text-transform: uppercase;
}

/* The image sits between the subtitle and the body text, so it needs its own gap below - the
   text that follows starts flush at the top, with no margin of its own to rely on. */
.cms-image-below-heading img {
  margin-bottom: 1rem;
}

.cms-align-start {
  text-align: start;
}

.cms-align-center {
  text-align: center;
}

.cms-align-end {
  text-align: end;
}

/* A grid that does not fill its row lines up with the heading above it. */
.cms-align-center > .row {
  justify-content: center;
}

.cms-align-end > .row {
  justify-content: flex-end;
}

/* A short heading on a tab, with a rule running out either side of it. */
.cms-section-label {
  text-align: center;
  position: relative;
}

.cms-section-label h2 {
  display: inline-block;
  position: relative;
  z-index: 1;
  padding: 0.25rem 1.25rem;
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius-pill);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cms-section-label::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  right: 0;
  border-top: 1px solid var(--bs-border-color);
}

.cms-hero {
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 4rem 1.5rem;
  border-radius: var(--bs-border-radius);
}

/* Readable over any photo, without depending on the image being dark. */
.cms-hero-body {
  background-color: rgba(0, 0, 0, 0.45);
  padding: 1.5rem;
  border-radius: var(--bs-border-radius);
  max-width: 40rem;
}

.cms-cta {
  background-size: cover;
  background-position: center;
  border-radius: var(--bs-border-radius);
}

/* The Banner crop's 4:1; a strip with more text than fits simply grows taller. */
.cms-cta-image {
  aspect-ratio: 4 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cms-cta-image.cms-align-start {
  align-items: flex-start;
}

.cms-cta-image.cms-align-center {
  align-items: center;
}

.cms-cta-image.cms-align-end {
  align-items: flex-end;
}

/* The arrow the old site puts after an inline "read more" link. */
.cms-link-arrow::after {
  content: " \2192";
  font-weight: 700;
}

.cms-trip-list {
  margin-bottom: 2rem;
}

.cms-trip-facts {
  margin: 0;
  padding: 0 1rem 1rem;
  color: var(--bs-secondary-color);
  font-size: 0.875rem;
}

.cms-faq {
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.75rem 0;
}

.cms-faq > summary {
  cursor: pointer;
  font-weight: 600;
}

/* The member-story look: the text set as a pull quote beside the portrait. Styled on the
   paragraphs rather than a ::before, which on a .row would become a stray flex item. */
.cms-quote p {
  font-size: 1.125rem;
  font-style: italic;
  border-left: 0.25rem solid var(--bs-primary);
  padding-left: 1rem;
}

.cms-split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 1rem;
}

/* The padding's percentage is of the row, so 50% is this column: the text keeps a 34rem lane
   beside the image however wide the screen is. */
@media (min-width: 768px) {
  .cms-split-text {
    padding: 3rem 4rem 3rem max(1rem, 50% - 38rem);
  }

  .cms-split-left .cms-split-text {
    padding: 3rem max(1rem, 50% - 38rem) 3rem 4rem;
  }
}

.cms-block-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.cms-split-text .cms-block-links {
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cms-split-text .cms-block-links > .btn {
  min-width: 12.5rem;
  padding: 0.75rem 2rem;
  border-radius: 0;
}

/* Every split image has the shape it is cropped to (MediaFormat.Content, 3:2), so a crop fits it
   exactly and all split blocks are the same size; only a longer text makes it taller. */
.cms-split-image {
  position: relative;
  aspect-ratio: 3 / 2;
}

.cms-split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A picked text colour reaches the links and headings inside the rich text too. */
.cms-text-color a,
.cms-text-color :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.cms-zone-blocks {
  display: contents;
}

/* Link lists, mostly for a template's menu and footer: plain lists of links, optionally with an
   icon per phone or e-mail link, or a row of social media icons. */
.cms-link-list ul,
.cms-icon-links ul,
.cms-social-links ul {
  list-style: none;
  padding: 0;
}

.cms-icon-links a[href^="tel:"]::before,
.cms-icon-links a[href^="mailto:"]::before,
.cms-social-links a::before {
  font-family: "bootstrap-icons";
  display: inline-block;
  line-height: 1;
}

.cms-icon-links a[href^="tel:"]::before {
  content: "\f5b4";
  margin-right: 0.6rem;
}

.cms-icon-links a[href^="mailto:"]::before {
  content: "\f32c";
  margin-right: 0.6rem;
}

.cms-social-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.cms-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  font-size: 0;
  text-decoration: none;
}

.cms-social-links a::before {
  content: "\f470";
  font-size: 1.25rem;
}

.cms-social-links a[href*="facebook."]::before {
  content: "\f344";
}

.cms-social-links a[href*="youtube."]::before {
  content: "\f62b";
}

.cms-social-links a[href*="instagram."]::before {
  content: "\f437";
}

.cms-social-links a[href*="linkedin."]::before {
  content: "\f472";
}

.cms-social-links a[href*="x.com"]::before,
.cms-social-links a[href*="twitter."]::before {
  content: "\f8db";
}

.cms-video iframe {
  border: 0;
  border-radius: var(--bs-border-radius);
}

.cms-page-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-body-bg);
}

.cms-page-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Stands in for an image that is missing or does not load; an application sets its colour with
   --cms-image-placeholder-accent, and its own shape for the element beats the image's ratio. */
.cms-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--cms-image-placeholder-accent, var(--bs-secondary-color)) 15%, transparent);
  background-clip: content-box;
}

:where(.cms-image-placeholder) {
  width: 100%;
  aspect-ratio: var(--cms-image-placeholder-ratio, 3 / 2);
}

.cms-image-placeholder::before {
  content: "";
  width: 3rem;
  height: 3rem;
  background-color: var(--cms-image-placeholder-accent, var(--bs-secondary-color));
  mask: url("../images/image-placeholder.svg") center / contain no-repeat;
}

.cms-page-card-body {
  padding: 1rem;
}

.cms-page-cards-link {
  display: inline-block;
  margin-top: 1rem;
}