/*
 * Hero component styles.
 *
 * Theme tokens only (--padis-color-*, --padis-space-*, --padis-font-*, etc.)
 * - no hardcoded colours/spacing/fonts, matching site.css.
 * Layout height is one of four predefined sizes only (Standard/Compact/Full
 * Width/Fullscreen) - no free-form dimension entry.
 */

.padis-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 26rem;
  padding-block: var(--padis-space-xl);
  color: var(--padis-color-on-primary);
  background: linear-gradient(135deg, var(--padis-color-primary) 0%, var(--padis-color-primary-darker) 100%);
  /* Reserve space so anchor-scroll targets land below the fixed
     header/pill and operational-message bar instead of hiding under them. */
  scroll-margin-top: calc(var(--padis-header-height, 5rem) + var(--padis-operational-height, 0px) + var(--padis-space-md));
}

.padis-hero--compact {
  min-height: 16rem;
  padding-block: var(--padis-space-lg);
}

.padis-hero--full-width {
  min-height: 32rem;
  /* Break out of any ancestor .padis-container to go edge-to-edge; the
     inner content keeps .padis-container (see hero.cshtml) for reading width. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.padis-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.padis-hero__image,
.padis-hero__video,
.padis-hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* object-fit: cover so background media scales/crops without distortion
     on any viewport (video is never suppressed on mobile). */
  object-fit: cover;
}

.padis-hero__poster {
  display: none;
}

/* Toggled by hero.js when prefers-reduced-motion is set, or when the video
   fails to load (accessibility). */
.padis-hero--show-poster .padis-hero__video {
  display: none;
}

.padis-hero--show-poster .padis-hero__poster {
  display: block;
}

/* Semi-transparent overlay between the background media and text content,
   preserving contrast/legibility. */
.padis-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--padis-hero-overlay);
}

/* No background image/video configured: theme background colour only, no
   overlay/media element. */
.padis-hero:not(.padis-hero--has-video):not(:has(.padis-hero__image)) .padis-hero__overlay {
  display: none;
}

/* Bottom edge shape and bottom fade are drawn in the theme surface colour so
   they match whatever page background the customer's theme uses. Both sit
   above the media/overlay but below the text content (z-index 2). */
.padis-hero--edge-curve::after,
.padis-hero--edge-slant::after,
.padis-hero--edge-custom::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 1;
  height: clamp(2rem, 6vw, 6rem);
  pointer-events: none;
}

.padis-hero--edge-curve::after {
  /* Vector mask instead of a gradient: browsers anti-alias a scaled SVG path
     cleanly, so the curve stays smooth at any width. */
  background-color: var(--padis-color-surface);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0A50 10 0 0 0 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0A50 10 0 0 0 100 0V10H0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.padis-hero--edge-slant::after {
  background: var(--padis-color-surface);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

/* Uploaded SVG/PNG: its opaque areas are painted in the theme surface colour
   (the file's own colours are ignored), so it never clashes with the page. */
.padis-hero--edge-custom::after {
  background-color: var(--padis-color-surface);
  -webkit-mask: var(--padis-hero-mask) center / 100% 100% no-repeat;
  mask: var(--padis-hero-mask) center / 100% 100% no-repeat;
}

.padis-hero--fade-subtle { --padis-hero-fade-height: 20%; }
.padis-hero--fade-medium { --padis-hero-fade-height: 40%; }
.padis-hero--fade-strong { --padis-hero-fade-height: 65%; }

.padis-hero--fade-subtle,
.padis-hero--fade-medium,
.padis-hero--fade-strong {
  background: var(--padis-color-surface);
}

.padis-hero--fade-subtle .padis-hero__media,
.padis-hero--fade-medium .padis-hero__media,
.padis-hero--fade-strong .padis-hero__media,
.padis-hero--fade-subtle .padis-hero__overlay,
.padis-hero--fade-medium .padis-hero__overlay,
.padis-hero--fade-strong .padis-hero__overlay {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--padis-hero-fade-height)), rgba(0, 0, 0, .6) calc(100% - var(--padis-hero-fade-height) * .5), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--padis-hero-fade-height)), rgba(0, 0, 0, .6) calc(100% - var(--padis-hero-fade-height) * .5), transparent 100%);
}

.padis-hero__inner {
  position: relative;
  z-index: 2;
  /* Stretch to full height so actions can pin to the bottom via
     margin-top: auto. Width is left to the .padis-container class already
     on this element. */
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.padis-hero__heading {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--padis-space-sm);
  overflow-wrap: break-word;
}

.padis-hero__description {
  font-size: 1.125rem;
  max-width: 42rem;
  margin-bottom: var(--padis-space-md);
  overflow-wrap: break-word;
}

.padis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--padis-space-sm);
  justify-content: center;
  /* Pinned to the bottom of .padis-hero__inner regardless of content
     length above; pulled past the section's own bottom padding. */
  margin-top: auto;
  margin-bottom: calc(-1 * var(--padis-space-md));
}

.padis-hero .padis-button--secondary {
  color: var(--padis-color-on-primary);
  border-color: var(--padis-color-on-primary);
}

.padis-hero .padis-button--secondary:hover {
  background-color: var(--padis-color-on-primary);
  color: var(--padis-color-primary);
}

/* color-mix so the primary CTA reads as a glassy overlay regardless of
   whether the theme color was entered as hex or rgba. The colour comes from
   the --padis-hero-cta-* tokens a CTA's Colour option sets (see below) and
   falls back to the primary family, which is also what buttons dropped into
   Overlay Content get. */
.padis-hero .padis-button--primary {
  background-color: color-mix(in srgb, var(--padis-hero-cta-bg, var(--padis-color-primary)) 55%, transparent);
  border-color: var(--padis-hero-cta-bg, var(--padis-color-primary));
  color: var(--padis-hero-cta-text, var(--padis-color-on-primary));
}

.padis-hero .padis-button--primary:hover {
  background-color: color-mix(in srgb, var(--padis-hero-cta-bg-hover, var(--padis-color-primary-dark)) 70%, transparent);
  border-color: var(--padis-hero-cta-bg-hover, var(--padis-color-primary-dark));
}

/* CTA Colour: a theme-token choice per button, never a free colour. Primary
   sets nothing, so it renders exactly as before the option existed. */
.padis-hero__cta--secondary {
  --padis-hero-cta-bg: var(--padis-color-secondary);
  --padis-hero-cta-bg-hover: var(--padis-color-secondary-dark);
  --padis-hero-cta-text: var(--padis-color-on-secondary);
}

.padis-hero__cta--accent {
  --padis-hero-cta-bg: var(--padis-color-accent);
  --padis-hero-cta-bg-hover: var(--padis-color-accent-dark);
  --padis-hero-cta-text: var(--padis-color-on-accent);
}

/* Optional CTA icon. Drawn as a mask in the text colour, so any uploaded
   SVG/PNG follows the theme instead of its own colours. */
.padis-hero__cta--has-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.padis-hero__cta-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  background-color: currentColor;
  -webkit-mask: var(--padis-hero-cta-icon) center / contain no-repeat;
  mask: var(--padis-hero-cta-icon) center / contain no-repeat;
}

/* Button Appearance = Icon tiles: square, solid tiles with the icon centred
   above a label pinned to the bottom. */
.padis-hero--cta-tiles .padis-hero__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: var(--padis-space-sm);
  width: clamp(6rem, 8vw, 7.5rem);
  aspect-ratio: 1;
  padding: var(--padis-space-sm);
  border: 0;
  background-color: var(--padis-hero-cta-bg, var(--padis-color-primary));
  font-family: var(--padis-font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
}

.padis-hero--cta-tiles .padis-hero__cta:hover {
  background-color: var(--padis-hero-cta-bg-hover, var(--padis-color-primary-dark));
}

.padis-hero--cta-tiles .padis-hero__cta-icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-block: auto;
}

/* Text position (clients should be able to self-serve common layout
   changes without developer help). Left is the existing default look;
   Center/Right align the heading/description/actions accordingly, including
   re-centering/re-aligning the actions row which is otherwise always
   centered regardless of the heading's own alignment. */
.padis-hero--text-center .padis-hero__inner {
  align-items: center;
  text-align: center;
}

.padis-hero--text-right .padis-hero__inner {
  align-items: flex-end;
  text-align: right;
}

.padis-hero--text-right .padis-hero__actions {
  justify-content: flex-end;
}

/* Content Placement = Center/Bottom: heading, description and actions are
   grouped in the middle or at the bottom, and the actions follow the text
   position instead of always being centred. Top (the default) keeps the
   original layout above. */
.padis-hero--content-center .padis-hero__inner {
  justify-content: center;
}

.padis-hero--content-bottom .padis-hero__inner {
  justify-content: flex-end;
}

:is(.padis-hero--content-center, .padis-hero--content-bottom) .padis-hero__actions {
  justify-content: flex-start;
  margin-top: 0;
  margin-bottom: 0;
}

:is(.padis-hero--content-center, .padis-hero--content-bottom).padis-hero--text-center .padis-hero__actions {
  justify-content: center;
}

:is(.padis-hero--content-center, .padis-hero--content-bottom).padis-hero--text-right .padis-hero__actions {
  justify-content: flex-end;
}

/* Description Style = Tagline: a large line in the heading font. */
.padis-hero--description-tagline .padis-hero__description {
  font-family: var(--padis-font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.25;
  margin-block: var(--padis-space-sm) var(--padis-space-lg);
}

/* Standard stays inside the page container so it lines up with the header
   logo and page content; Full Width is the edge-to-edge option. */
.padis-hero--standard {
  width: min(100% - 2 * var(--padis-gutter), var(--padis-container-max));
  margin-inline: auto;
  border-radius: var(--padis-radius);
}

.padis-hero--fullscreen {
  /* Edge-to-edge and one viewport tall. The first hero's top padding (site.css)
     already clears the header, so the hero starts at the top of the page. */
  min-height: calc(100vh - var(--padis-operational-height, 0px));
  min-height: calc(100svh - var(--padis-operational-height, 0px));
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

@media (max-width: 48rem) {
  .padis-hero--standard,
  .padis-hero--full-width {
    /* A tall hero pushes page content far down on mobile; Compact remains the
       recommended (not enforced) editorial choice there. */
    min-height: 20rem;
  }
}

/* Overlay Content: up to two components (any block type) floated as a card
   on top of the Hero (e.g. FA09-style card over a fullscreen photo).
   Preset corner positions only (keep this self-serve but not
   free-form, to avoid off-screen/overlap issues across breakpoints). */
.padis-hero__overlay-content {
  position: absolute;
  z-index: 3;
  /* A definite `width` is required: container-type: inline-size below needs
     a determinable inline size, and max-width alone would collapse to
     zero-width shrink-to-fit. Fluid (vw-based) so it scales continuously
     with the viewport instead of jumping between fixed sizes, capped at
     40rem/available width. */
  width: clamp(9rem, 40vw, min(40rem, calc(100% - 2 * var(--padis-space-md))));
  /* Fluid margin too, so the gap scales with the card instead of staying
     a flat, increasingly-large-looking gap on a small card. */
  margin: clamp(0.75rem, 3vw, var(--padis-space-md));
  color: var(--padis-color-text);
  /* Re-scope --padis-color-surface to a translucent version within this
     subtree only. Every card-style component reads its background from
     this token, so whatever gets dropped into Overlay Content automatically
     renders as a glass card here. */
  --padis-color-surface: color-mix(in srgb, var(--padis-color-surface-opaque, #ffffff) 70%, transparent);
  /* Establish a query container so a dropped-in component (e.g. News Card's
     grid) responds to this box's own width, not the viewport. */
  container-type: inline-size;
  container-name: padis-hero-overlay;
}

/* The overlay wrapper is just a transparent positioning box - visual weight
   sits on the overlaid component's own cards instead, so it isn't wrapped in
   two stacked boxes at once. :where() keeps this at zero specificity. */
.padis-hero__overlay-content :where(.padis-facility-card, .padis-facility--icon-grid, .padis-facility-compact, .padis-news-card__link, .padis-kontaktblok__card, .padis-dokumentliste__card, .padis-genvejskort-card__link, .padis-lease-type-card, .padis-department-card) {
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
}

.padis-hero__overlay-content .padis-facility-compact {
  padding-inline: var(--padis-space-sm);
  border-radius: var(--padis-radius);
}

/* "Load more" pagination doesn't fit the Hero's compact overlay slot, so
   hide it when News is dropped in as Overlay Content. */
.padis-hero__overlay-content .padis-news__load-more,
.padis-hero__overlay-content .padis-news__load-more-error {
  display: none;
}

/* Overlay Content is a small preset card, not a full-page News section, so
   shorten the card here: a wider image crop and a 2-line excerpt clamp,
   scoped to this context only. */
.padis-hero__overlay-content .padis-news-card__image-wrapper {
  aspect-ratio: 21 / 9;
}

.padis-hero__overlay-content .padis-news-card__excerpt {
  -webkit-line-clamp: 2;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Browsers without backdrop-filter support get a slightly more opaque
     background instead, so text remains readable without the blur. */
  .padis-hero__overlay-content {
    --padis-color-surface: color-mix(in srgb, var(--padis-color-surface-opaque, #ffffff) 88%, transparent);
  }
}

.padis-hero__overlay-content--top-left {
  top: 0;
  left: 0;
}

.padis-hero__overlay-content--top-right {
  top: 0;
  right: 0;
}

.padis-hero__overlay-content--bottom-left {
  bottom: 0;
  left: 0;
}

.padis-hero__overlay-content--bottom-right {
  bottom: 0;
  right: 0;
  /* Nudged in from the corner and up off the very bottom edge so the card
     grid reads as centered within the lower portion of the hero rather than
     pinned flush into the corner. */
  margin-inline-end: clamp(var(--padis-space-md), 6vw, 4rem);
  margin-block-end: clamp(var(--padis-space-lg), 8vh, 5rem);
}

/* Give bottom-anchored overlay cards extra clearance above the actions row
   (which is always centered and pinned to the very bottom) so they stack
   instead of overlapping when CTA buttons are present. */
.padis-hero--has-actions .padis-hero__overlay-content--bottom-right,
.padis-hero--has-actions .padis-hero__overlay-content--bottom-left {
  margin-block-end: clamp(6rem, 18vh, 9rem);
}

/* Overlay Style = Filled: the overlay box itself becomes one card in the
   theme's primary colour (instead of a transparent box around the overlaid
   component's own glass cards). The card sits in the layout flow rather than
   being absolutely positioned: the hero becomes a three-column grid whose
   middle column is exactly the page container, the text and the card share
   that column, and the hero grows to fit the card - so a tall card never
   rides up under the header on short or narrow viewports. */
.padis-hero--overlay-filled {
  --padis-hero-card-width: clamp(16rem, 26vw, 26rem);
  /* Captured before the card re-scopes --padis-color-text below. */
  --padis-hero-card-pill-text: var(--padis-color-text);
  display: grid;
  grid-template-columns: minmax(var(--padis-gutter), 1fr) minmax(0, var(--padis-container-max)) minmax(var(--padis-gutter), 1fr);
  align-items: stretch;
}

/* The grid column already is the container width, so the inner drops the
   .padis-container sizing it would otherwise apply a second time. */
.padis-hero--overlay-filled .padis-hero__inner {
  grid-area: 1 / 2;
  width: auto;
  margin-inline: 0;
}

.padis-hero--overlay-filled .padis-hero__overlay-content {
  grid-area: 1 / 2;
  position: relative;
  inset: auto;
  z-index: 3;
  width: var(--padis-hero-card-width);
  margin: 0;
  padding: var(--padis-space-md);
  border-radius: var(--padis-radius);
  box-shadow: var(--padis-shadow);
  background-color: var(--padis-color-primary);
  color: var(--padis-color-on-primary);
  /* Components inside read these tokens, so their text turns light and their
     own card backgrounds disappear into this one card. */
  --padis-color-text: var(--padis-color-on-primary);
  --padis-color-text-muted: color-mix(in srgb, var(--padis-color-on-primary) 80%, transparent);
  --padis-color-surface: transparent;
}

.padis-hero--overlay-filled .padis-hero__overlay-content--top-left,
.padis-hero--overlay-filled .padis-hero__overlay-content--bottom-left {
  justify-self: start;
}

.padis-hero--overlay-filled .padis-hero__overlay-content--top-right,
.padis-hero--overlay-filled .padis-hero__overlay-content--bottom-right {
  justify-self: end;
}

.padis-hero--overlay-filled .padis-hero__overlay-content--top-left,
.padis-hero--overlay-filled .padis-hero__overlay-content--top-right {
  align-self: start;
}

.padis-hero--overlay-filled .padis-hero__overlay-content--bottom-left,
.padis-hero--overlay-filled .padis-hero__overlay-content--bottom-right {
  align-self: end;
}

/* With centred content the card centres vertically beside it too; the
   corner position then only picks the side. */
.padis-hero--overlay-filled.padis-hero--content-center .padis-hero__overlay-content {
  align-self: center;
}

@media (min-width: 48.0625rem) {
  .padis-hero--overlay-filled.padis-hero--overlay-right .padis-hero__inner {
    padding-inline-end: calc(var(--padis-hero-card-width) + var(--padis-space-lg));
  }

  .padis-hero--overlay-filled.padis-hero--overlay-left .padis-hero__inner {
    padding-inline-start: calc(var(--padis-hero-card-width) + var(--padis-space-lg));
  }
}

.padis-hero__overlay-content--filled .padis-block {
  margin-bottom: 0;
}

.padis-hero__overlay-content--filled .padis-block + .padis-block {
  margin-top: var(--padis-space-md);
}

.padis-hero__overlay-content--filled :is(h2, h3) {
  margin-top: 0;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  font-weight: 400;
}

.padis-hero__overlay-content--filled a:not(.padis-button) {
  color: inherit;
}

/* Any button in a filled card becomes a light pill with an accent arrow, so
   it stands out from the card whichever button style was picked. */
.padis-hero__overlay-content--filled .padis-button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.6em 1.2em;
  border: 0;
  border-radius: 999px;
  background-color: var(--padis-color-on-primary);
  color: var(--padis-hero-card-pill-text);
  font-weight: 400;
}

.padis-hero__overlay-content--filled .padis-button::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  background-color: var(--padis-color-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.padis-hero__overlay-content--filled .padis-button:hover {
  background-color: color-mix(in srgb, var(--padis-color-on-primary) 85%, var(--padis-color-primary));
  border-color: transparent;
}

@media (max-width: 48rem) {
  /* Overlay Content is hidden entirely on mobile rather than stacked below
     the photo - no good compact presentation for an arbitrary component at
     this width. */
  .padis-hero__overlay-content {
    display: none;
  }

  /* Exception: a Filled card is a self-contained text card, so it stacks
     below the hero text (second grid row) instead of disappearing. */
  .padis-hero--overlay-filled {
    grid-template-rows: 1fr auto;
  }

  .padis-hero--overlay-filled .padis-hero__overlay-content {
    display: block;
    grid-area: 2 / 2;
    justify-self: stretch;
    align-self: start;
    width: auto;
    margin: var(--padis-space-lg) 0 0;
  }
}