/*
 * dojo/next-course and the home hero row that holds it. CUBE order: block root, composition, blocks (eyebrow, title,
 * facts, start, cta), exceptions (scale at the two ends of the viewport). Tokens: assets/css/tokens.css.
 * The row is Kadence's: it carries the class `dojo-hero-row` (set on the row block in the reusable block "Hero Curso")
 * and only its layout is touched here. No !important, no @layer.
 */

/* Composition: the row is as tall as the screen under the site header, photos on the left, text centred on the right. */
.dojo-hero-row {
  --dojo-hero-offset: 4.375rem; /* the site header floats over the top of the page: the row starts under it */
  --dojo-entry-pad: 0rem; /* Kadence pads the page content on small screens: that padding already pushes the row down */
  padding-block-start: calc(var(--dojo-hero-offset) - var(--dojo-entry-pad));
}

@media (max-width: 64em) {
  .dojo-hero-row {
    --dojo-entry-pad: 2rem;
  }
}

@media (max-width: 47.9375em) {
  .dojo-hero-row {
    --dojo-entry-pad: 1.5rem;
  }
}

@media (min-width: 48.0625em) {
  .dojo-hero-row > .kt-row-column-wrap.kt-has-2-columns.kt-row-valign-middle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-block-size: calc(100vh - var(--dojo-hero-offset));
    min-block-size: calc(100svh - var(--dojo-hero-offset));
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    max-inline-size: none;
    padding-inline: 0;
    padding-block: 0;
    align-content: stretch;
    align-items: stretch;
  }

  .dojo-hero-row > .kt-row-column-wrap > .wp-block-kadence-column {
    min-inline-size: 0;
  }

  /* Kadence pulls the first column out to the screen edge with a negative margin: the halves are already full width. */
  .dojo-hero-row > .kt-row-column-wrap.kt-has-2-columns > .wp-block-kadence-column:nth-child(n):not(.specificity) {
    margin-inline: 0;
  }

  /* The photos fill their column: a stack of full-height boxes down to the image, which covers. */
  .dojo-hero-row .wp-block-kadence-advancedgallery,
  .dojo-hero-row .kb-gallery-ul,
  .dojo-hero-row .kt-blocks-carousel,
  .dojo-hero-row .splide__track,
  .dojo-hero-row .splide__list,
  .dojo-hero-row .splide__slide,
  .dojo-hero-row .kadence-blocks-gallery-item,
  .dojo-hero-row .kadence-blocks-gallery-item-inner,
  .dojo-hero-row .kb-gallery-figure,
  .dojo-hero-row .kb-gal-image-radius,
  .dojo-hero-row .kb-gallery-image-contain {
    block-size: 100%;
  }

  .dojo-hero-row > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
    block-size: 100%;
  }

  /* Kadence reserves a square with an empty box and bottom padding; the selector is as long as theirs to replace it. */
  .dojo-hero-row .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner figure .kb-gallery-image-contain.kadence-blocks-gallery-intrinsic {
    block-size: 100%;
    aspect-ratio: auto;
    padding: 0;
  }

  .dojo-hero-row > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
    align-self: stretch;
  }

  .dojo-hero-row > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: 100%;
  }
}

/* Block: the text. Centred on both axes; the scale follows the viewport (tokens). */
.dojo-next-course {
  display: grid;
  justify-items: center;
  gap: var(--dojo-space-xs);
  inline-size: 100%;
  max-inline-size: 42rem;
  margin-inline: auto;
  padding: var(--dojo-space-l) var(--dojo-space-m);
  color: var(--dojo-ink);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step-1);
  line-height: 1.5;
  text-align: center;
}

.dojo-next-course *,
.dojo-next-course *::before,
.dojo-next-course *::after {
  box-sizing: border-box;
}

.dojo-next-course :is(p, ul, h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
}

.dojo-next-course .dojo-next-course__eyebrow {
  color: var(--dojo-seal);
  font-size: var(--dojo-step-0);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}

.dojo-next-course .dojo-next-course__highlight {
  font-weight: 400;
}

.dojo-next-course .dojo-next-course__title {
  color: var(--dojo-ink);
  font-family: var(--dojo-font-display);
  font-size: var(--dojo-step-5);
  font-weight: 800;
  letter-spacing: normal;
  line-height: 1.1;
  text-wrap: balance;
}

.dojo-next-course .dojo-next-course__facts {
  display: grid;
  gap: var(--dojo-space-2xs);
  list-style: none;
}

.dojo-next-course .dojo-next-course__facts li::before {
  content: "\2714\FE0E" / "";
  margin-inline-end: 0.4em;
}

.dojo-next-course .dojo-next-course__facts a {
  color: var(--dojo-seal-deep);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dojo-next-course .dojo-next-course__facts a:hover {
  color: var(--dojo-ink);
}

.dojo-next-course .dojo-next-course__start,
.dojo-next-course .dojo-next-course__soon {
  margin-block-start: var(--dojo-space-xs);
  color: var(--dojo-seal);
  font-size: var(--dojo-step-1);
  font-weight: 700;
  line-height: 1.3;
}

.dojo-next-course .dojo-next-course__start {
  text-transform: uppercase;
}

.dojo-next-course .dojo-next-course__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--dojo-target);
  margin-block-start: var(--dojo-space-xs);
  padding: var(--dojo-space-2xs) var(--dojo-space-l);
  border: var(--dojo-border) solid var(--dojo-seal);
  border-radius: var(--dojo-radius);
  background: var(--dojo-seal);
  color: var(--dojo-paper);
  font-size: var(--dojo-step-0);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.dojo-next-course .dojo-next-course__cta:hover {
  border-color: var(--dojo-seal-deep);
  background: var(--dojo-seal-deep);
  color: var(--dojo-paper);
}

.dojo-next-course :focus-visible {
  outline: 0.125rem solid var(--dojo-ink);
  outline-offset: 0.125rem;
}

/* Exceptions: on a phone the photos come first and the text stacks under them, no forced height. */
@media (max-width: 48em) {
  /* The text follows the photo closely: no column gap, and a top space that scales with the screen. */
  .dojo-hero-row > .kt-row-column-wrap {
    row-gap: 0;
  }

  .dojo-hero-row .wp-block-kadence-advancedgallery {
    block-size: auto;
    margin-block-end: 0;
    padding-block-end: 0;
  }

  .dojo-next-course {
    padding-block: 11vw var(--dojo-space-xl);
  }

  /* The highlight takes its own line under the months; the separator is not needed there. */
  .dojo-next-course .dojo-next-course__sep {
    display: none;
  }

  .dojo-next-course .dojo-next-course__highlight {
    display: block;
  }

  .dojo-next-course .dojo-next-course__title {
    font-size: var(--dojo-step-4);
  }
}

/*
 * The gallery's chrome, at every width. The dots sit bottom right on a paper pill, so they never cover the caption;
 * the caption is a paper label bottom left, always shown (Kadence hides it until hover, over a dark fade).
 * The selectors are as long as Kadence's to replace theirs without !important.
 */
/* Kadence keeps 30px under the carousel for its dots; ours sit on the photo, so the space goes. */
.dojo-hero-row .kb-gallery-ul .kt-blocks-carousel.splide {
  margin-block-end: 0;
}

.dojo-hero-row .kb-gallery-ul .kt-blocks-carousel .splide__pagination.splide__pagination {
  inset-block: auto var(--dojo-space-xs);
  inset-inline: auto var(--dojo-space-xs);
  inline-size: max-content;
  margin: 0;
  padding: var(--dojo-space-3xs) var(--dojo-space-xs);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dojo-paper) 88%, transparent);
}

.dojo-hero-row .kb-gallery-ul .kadence-blocks-gallery-item .kadence-blocks-gallery-item-inner .kadence-blocks-gallery-item__caption {
  inset-block: auto var(--dojo-space-xs);
  inset-inline: var(--dojo-space-xs) auto;
  inline-size: max-content;
  max-inline-size: calc(100% - 9rem);
  max-block-size: none;
  overflow: visible;
  padding: var(--dojo-space-3xs) var(--dojo-space-xs);
  border-radius: var(--dojo-radius);
  background: var(--dojo-paper);
  color: var(--dojo-ink);
  font-family: var(--dojo-font-text);
  font-size: var(--dojo-step--1);
  line-height: 1.35;
  text-align: start;
  opacity: 1;
}