/*
 * Project-specific styles for Urlaubsnesterl.
 * This file is loaded after TYPO3 Theme Camino.
 */

/* Playfair Display for all headings; body copy remains in Open Sans. */
@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-500.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-600.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-800.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../Fonts/playfair-display-v30-latin/playfair-display-v30-latin-900.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

.headline,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', Georgia, serif;
}

:root,
.theme-forest-mist {
    --color-primary-100: #686e61;
}

:root {
    --button-primary-color: var(--color-primary-100);
    --button-primary-color-hover: #cccac8;
    --button-primary-color-focus: #eeecdb;
    --button-primary-color-pressed: #565b50;
    --button-primary-border-color: var(--button-primary-color);
    --button-primary-border-color-hover: var(--button-primary-color-hover);
    --button-primary-border-color-pressed: var(--button-primary-color-pressed);
    --button-primary-content-color: #fff;
    --button-primary-content-color-hover: #fff;
    --button-primary-content-color-pressed: #fff;
    --urlaubsnesterl-gallery-gap: 0.2rem;
    --urlaubsnesterl-gallery-radius: 0.2rem;
    --color-neutral-80: #b8bd92;
}
.header__nav-item {
    font-size: 1rem;
}
.header__language-nav {
    font-size: 0.8rem;
}
.header__language-menu-item {
    font-size: 0.8rem;
}
.header__language-menu {
    max-width: 8rem;
}

/* A page with a Bootstrap Package navigation icon becomes an icon-only item.
   Its title remains available to screen readers in the Fluid template. */
.header__nav-item--icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header__nav-icon {
    display: inline-flex;
    width: 1.35rem;
    height: 1.35rem;
    align-items: center;
    justify-content: center;
}

.header__nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor;
}

/* Camino reserves the fixed-header height on main, although the hero is
   rendered before main. Move that existing offset to the hero itself. */
.header--fixed + .hero {
    margin-block-start: calc(var(--header-height) + (2 * var(--header-padding-vertical)));
}

.header--fixed + .hero + .page__content--fixed {
    padding-block-start: 0;
}

/* Restore the familiar TYPO3 controls for space before and after. The value
   "none" is the calm Camino default; "zero" explicitly removes the gap. */
.frame-space-before-none {
    margin-block-start: var(--component-margin-vertical, 5rem);
}

.frame-space-after-none {
    margin-block-end: var(--component-margin-vertical, 5rem);
}

.frame-space-before-zero {
    margin-block-start: 0;
}

.frame-space-after-zero {
    margin-block-end: 0;
}

.frame-space-before-extra-small {
    margin-block-start: var(--spacing-s, 0.5rem);
}

.frame-space-after-extra-small {
    margin-block-end: var(--spacing-s, 0.5rem);
}

.frame-space-before-small {
    margin-block-start: var(--spacing-m, 1rem);
}

.frame-space-after-small {
    margin-block-end: var(--spacing-m, 1rem);
}

.frame-space-before-medium {
    margin-block-start: calc(2 * var(--spacing-m, 1rem));
}

.frame-space-after-medium {
    margin-block-end: calc(2 * var(--spacing-m, 1rem));
}

.frame-space-before-large {
    margin-block-start: var(--spacing-frame, 3.5rem);
}

.frame-space-after-large {
    margin-block-end: var(--spacing-frame, 3.5rem);
}

.frame-space-before-extra-large {
    margin-block-start: var(--component-margin-vertical, 5rem);
}

.frame-space-after-extra-large {
    margin-block-end: var(--component-margin-vertical, 5rem);
}

.masonry-gallery__headline {
    margin-block-end: clamp(1rem, 2vw, 2.5rem);
}

.masonry-gallery__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: dense;
    gap: var(--urlaubsnesterl-gallery-gap);
    align-items: start;
}

.masonry-gallery__grid--enhanced {
    /* JavaScript reserves the vertical gap inside every item's row span.
       Keeping row-gap at zero avoids repeated rounding differences. */
    grid-auto-rows: 0.5px;
    row-gap: 0;
    column-gap: var(--urlaubsnesterl-gallery-gap);
}

.masonry-gallery__item {
    min-width: 0;
    margin: 0;
    grid-column: span 1;
}

.masonry-gallery__card {
    position: relative;
    overflow: hidden;
    border-radius: var(--urlaubsnesterl-gallery-radius);
    background: var(--color-neutral-10, #f5f0ed);
}

.masonry-gallery__image {
    display: block;
    width: 100%;
    height: auto;
}

.masonry-gallery__link {
    position: relative;
    display: block;
    color: inherit;
    cursor: zoom-in;
    text-decoration: none;
}

.masonry-gallery__zoom {
    position: absolute;
    z-index: 2;
    right: 0.75rem;
    bottom: 0.75rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: rgb(100 50 10 / 25%);
    color: #fff;
    font-size: 1.65rem;
    font-weight: 300;
    line-height: 1;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 160ms ease, transform 160ms ease;
}

.masonry-gallery__link:hover .masonry-gallery__zoom,
.masonry-gallery__link:focus-visible .masonry-gallery__zoom {
    opacity: 1;
    transform: scale(1);
}

.masonry-gallery__caption {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 70%;
    padding: 0.75rem 4rem 0.75rem 1rem;
    overflow-y: auto;
    background: rgb(104 110 97 / 82%);
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translateY(0.35rem);
    transition: opacity 200ms ease, transform 200ms ease;
}

.masonry-gallery__card:hover .masonry-gallery__caption,
.masonry-gallery__card:focus-within .masonry-gallery__caption {
    opacity: 1;
    transform: translateY(0);
}

.masonry-gallery__caption > :first-child {
    margin-top: 0;
}

.masonry-gallery__caption > :last-child {
    margin-bottom: 0;
}

.masonry-gallery__caption p {
    margin-bottom: 0.4rem;
    color: inherit;
    font: inherit;
}

.masonry-gallery__caption h3,
.masonry-gallery__caption h4 {
    margin: 0 0 0.3rem;
    color: inherit;
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.2;
}

.masonry-gallery__caption h3 {
    font-size: 1.15rem;
}

.masonry-gallery__caption h4 {
    font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
    .masonry-gallery__caption {
        transition: none;
    }
}
.pswp {
    --pswp-bg: #6b7166;
}
figcaption {
    padding: 0.5rem;
    font-size: var(--body-small-size);
}
.theme-forest-mist {
    --color-primary-75: #b8bd92;
    --color-neutral-90: #686e61;
    --color-neutral-80: #949974;
}

/* Regular Bootstrap gallery (kept separate from the Masonry gallery). */
.gallery-row {
    display: flex;
    flex-wrap: wrap;
    margin: -0.375rem;
}

/* The Bootstrap gallery keeps its own layout, but should follow Camino's
   normal content width unless “Ohne Rahmen” was selected. */
.frame-type-gallery:not(.frame-none) .frame-container {
    width: min(calc(100% - (2 * var(--component-padding-horizontal, 1.5rem))), var(--content-max-width));
    margin-inline: auto;
}

.gallery-row > :where(.gallery-item) {
    box-sizing: border-box;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0.075rem;
}

.gallery-row .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.gallery-row .gallery-item a,
.gallery-row .gallery-item picture,
.gallery-row .gallery-item img {
    display: block;
    width: 100%;
}

@media (min-width: 36rem) {
    .gallery-item--columns-2,
    .gallery-item--columns-3,
    .gallery-item--columns-4,
    .gallery-item--columns-5,
    .gallery-item--columns-6,
    .gallery-item--columns-7,
    .gallery-item--columns-8 {
        flex-basis: 50%;
        max-width: 50%;
    }
}

@media (min-width: 48rem) {
    .gallery-item--columns-3,
    .gallery-item--columns-5,
    .gallery-item--columns-6,
    .gallery-item--columns-7,
    .gallery-item--columns-8 {
        flex-basis: 33.333333%;
        max-width: 33.333333%;
    }
}

@media (min-width: 64rem) {
    .gallery-item--columns-3 {
        flex-basis: 33.333333%;
        max-width: 33.333333%;
    }

    .gallery-item--columns-4 {
        flex-basis: 25%;
        max-width: 25%;
    }

    .gallery-item--columns-5 {
        flex-basis: 20%;
        max-width: 20%;
    }

    .gallery-item--columns-6 {
        flex-basis: 16.666667%;
        max-width: 16.666667%;
    }

    .gallery-item--columns-7 {
        flex-basis: 14.285714%;
        max-width: 14.285714%;
    }

    .gallery-item--columns-8 {
        flex-basis: 12.5%;
        max-width: 12.5%;
    }
}

/* Camino's restored "Ohne Rahmen" option: retain the component structure,
 * but remove its content-width limit and horizontal inset. */
.component--full-width {
    --component-padding-horizontal: 0;
}

.component--full-width > .component__content {
    max-width: none;
}

/* Bootstrap Package exposes background images in the Appearance tab, while
 * Camino's component wrapper does not render them. Keep the image behind the
 * regular component content and support Bootstrap's available options. */
.component--has-background-image {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.component__background-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.component--has-background-image > .component__content {
    position: relative;
    z-index: 1;
}

.component__background-image--pattern {
    background-repeat: repeat;
    background-size: auto;
}

.component__background-image--parallax {
    background-attachment: fixed;
}

.component__background-image--fade {
    opacity: 0.125;
}

.component__background-image--blur {
    inset: -20px;
    filter: blur(10px);
}

.component__background-image--grayscale {
    filter: grayscale(1);
}

.component__background-image--sepia {
    filter: sepia(1);
}

@media (hover: none) {
    .component__background-image--parallax {
        background-attachment: initial;
    }
}

/* Keep primary buttons green where Camino otherwise switches them to white. */
body.theme-forest-mist [class*="--bg-80"],
body.theme-forest-mist [class*="--bg-100"],
body.theme-forest-mist .textmedia-teaser,
body.theme-forest-mist .textmedia-teaser--highlight {
    --button-primary-color: var(--color-primary-100);
    --button-primary-color-hover: #cccac8;
    --button-primary-color-focus: #eeecdb;
    --button-primary-color-pressed: #565b50;
    --button-primary-border-color: var(--button-primary-color);
    --button-primary-border-color-hover: var(--button-primary-color-hover);
    --button-primary-border-color-pressed: var(--button-primary-color-pressed);
    --button-primary-content-color: #fff;
    --button-primary-content-color-hover: #fff;
    --button-primary-content-color-pressed: #fff;
}

.header {
    background: #edebe9!important;
}
    .header__nav {
    --urlaubsnesterl-nav-color: var(--color-neutral-90, #686e61);
    --link-color: var(--color-neutral-90);
    --link-color-hover: var(--color-neutral-60);
}

/* Refined main navigation: uppercase labels, subtle dividers and short active marks. */
.header__nav-item,
.header__language-button-text,
.header__language-menu-link {
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.header__nav .header__nav-item.header__nav-item--active::before {
    right: auto;
    left: 50%;
    width: calc((100% - 2rem) / 3);
    height: 1px;
    background: var(--urlaubsnesterl-nav-color);
    transform: translateX(-50%);
}

.header__language-button {
    position: relative;
    border-color: transparent;
    color: var(--urlaubsnesterl-nav-color);
}

.header__nav .header__language-button .header__language-button-icon {
    color: var(--urlaubsnesterl-nav-color);
}

.header__language-button-text {
    position: relative;
}

.header__language-button-text::after {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: -0.35rem;
    width: 33.333%;
    height: 1px;
    background: currentColor;
    content: '';
    transform: translateX(-50%);
}

.header__language-menu-link--active {
    position: relative;
}
.header__nav-icon {
    width: 1rem;
    height: 1rem;
}
.button__text {
    border-bottom: .05rem solid var(--button-content-border-bottom-color);
}

        /* Keep the mobile menu trigger readable on the light header. */
@media (max-width: 63.99rem) {
    .header__menu-button .button.JS_header-menu-button {
        border-color: transparent;
        background: transparent;
        color: var(--color-neutral-90, #686e61);
    }

    body.theme-forest-mist .header.header--fixed .header__content .header__menu-button .button.JS_header-menu-button .button__content,
    body.theme-forest-mist .header.header--fixed .header__content .header__menu-button .button.JS_header-menu-button .button__text,
    body.theme-forest-mist .header.header--fixed .header__content .header__menu-button .button.JS_header-menu-button .icon {
        color: var(--color-neutral-90, #686e61);
    }
}

@media (min-width: 64rem) {
    .header__nav-list-item:not(:last-child)::after,
    .header__language-nav::before {
        position: absolute;
        top: 50%;
        width: 0.5px;
        height: 1.15rem;
        background: color-mix(in srgb, var(--urlaubsnesterl-nav-color) 45%, transparent);
        content: '';
        transform: translateY(-50%);
    }

    .header__nav-list-item:not(:last-child)::after {
        inset-inline-end: 0;
    }

    .header__language-nav {
        position: relative;
        margin-inline-start: 0.5rem;
        padding-inline-start: 0.5rem;
    }

    .header__language-nav::before {
        inset-inline-start: 0;
    }
}

.hero--align-left .hero__content {
    text-align: left;
}

.hero--align-center .hero__content {
    text-align: center;
}

.hero--align-right .hero__content {
    text-align: right;
}

/* Replace Camino's angular hero edge with the Urlaubsnesterl wave. */
@media (min-width: 48rem) {
    .hero--height-compact {
        --hero-height: 360px;
    }

    .hero--height-standard {
        --hero-height: 480px;
    }

    .hero--height-large {
        --hero-height: 640px;
    }

    .hero--height-screen {
        --hero-height: calc(100svh - 82px);
    }

    .hero__content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero__content .rich-text {
        max-width: var(--hero-content-max-width);
    }

    /* Keep the headline clear of the image at narrow desktop widths. */
    .hero__content > .headline {
        max-width: calc(50% - 1rem);
    }

    /* Keep only the button clear of the image without moving the headline. */
    .hero__content .button-wrapper__p {
        max-width: calc(50% - 2rem);
    }

    .hero--valign-top .hero__content {
        align-self: start;
        justify-content: flex-start;
    }

    .hero--valign-center .hero__content {
        align-self: center;
        justify-content: center;
    }

    .hero--valign-bottom .hero__content {
        align-self: end;
        justify-content: flex-end;
    }

    .hero__image {
        position: relative;
        overflow: hidden;
    }

    .hero__image .image__picture {
        clip-path: none;
    }

    .hero__image::before {
        position: absolute;
        z-index: 1;
        inset-block: 0;
        inset-inline-start: 0;
        width: auto;
        height: 100%;
        aspect-ratio: 214.2 / 548.7;
        background: url('/fileadmin/fewo/standards/welleFeWo.svg') left center / 100% 100% no-repeat;
        content: '';
        pointer-events: none;
    }
}

@media (max-width: 47.99rem) {
    .hero__image {
        position: relative;
        overflow: hidden;
    }

    .hero__image .image__picture {
        clip-path: none;
    }

    .hero__image::before {
        position: absolute;
        z-index: 1;
        inset-inline: 0;
        inset-block-end: 0;
        width: 100%;
        aspect-ratio: 548.7 / 59.4;
        background: url('/fileadmin/fewo/standards/welleFeWoHz.svg') center bottom / 100% 100% no-repeat;
        content: '';
        pointer-events: none;
    }

    .hero--align-center .hero__content > * {
        margin-inline: auto;
    }

    .hero--align-right .hero__content > * {
        margin-inline-start: auto;
    }
}

@media (min-width: 40rem) {
    .masonry-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .masonry-gallery__item--span-2,
    .masonry-gallery__item--span-3 {
        grid-column: span 2;
    }
}

@media (min-width: 64rem) {
    .masonry-gallery__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .masonry-gallery__item--span-2 {
        grid-column: span 2;
    }

    .masonry-gallery__item--span-3 {
        grid-column: span 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .masonry-gallery *,
    .masonry-gallery *::before,
    .masonry-gallery *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Rich-text additions restored for the project-specific RTE preset. */
.rich-text .lead,
.textpic .lead {
    font-size: clamp(1.125rem, 1rem + 0.35vw, 1.35rem);
    line-height: 1.55;
}

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

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

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

.text-justify {
    text-align: justify;
}

/* Clearly named outline option for Camino CTA links. */
.button--outline {
    --button-color: var(--button-secondary-color, transparent);
    --button-color-hover: var(--button-secondary-color-hover, var(--color-primary-100));
    --button-color-focus: var(--button-secondary-color-focus, var(--color-primary-100));
    --button-color-pressed: var(--button-secondary-color-pressed, var(--color-primary-100));
    --button-border-color: var(--button-secondary-border-color, var(--color-primary-100));
    --button-border-color-hover: var(--button-secondary-border-color-hover, var(--color-primary-100));
    --button-border-color-pressed: var(--button-secondary-border-color-pressed, var(--color-primary-100));
    --button-content-color: var(--button-secondary-content-color, var(--color-primary-100));
    --button-content-color-hover: var(--button-secondary-content-color-hover, var(--color-neutral-0));
    --button-content-color-pressed: var(--button-secondary-content-color-pressed, var(--color-neutral-0));
    --button-content-border-bottom-color: transparent;
    --button-content-border-bottom-color-hover: transparent;
}

/* Normal text and image elements should sit naturally inside footer columns. */
.component--page-footer .footer__col > .component {
    --component-padding-horizontal: 0;
    --component-padding-vertical: 0;
    --component-margin-vertical: var(--spacing-s);

    background: transparent;
}

/* The footer has more specific Camino spacing rules. Make the editor's
   explicit "Kein Abstand" choice win here as well. */
.component--page-footer .footer__col > .component.frame-space-before-zero {
    margin-block-start: 0;
}

.component--page-footer .footer__col > .component.frame-space-after-zero {
    margin-block-end: 0;
}

/* Text/Text & Images renders an empty button paragraph when no CTA link is
   set. It otherwise occupies about two text lines in the footer. */
.component--page-footer .button-wrapper__p:not(:has(a, button, .button)) {
    display: none;
}

/* Camino link lists are rendered without the component wrapper. Reset the
   browser's default ul margin so they connect directly to the text above. */
.component--page-footer .footer__col > .linklist {
    margin-block: 0;
}

.component--page-footer .footer__col > .component > .component__content {
    max-width: none;
}

.component--page-footer .footer__col .textpic {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-s);
}

.component--page-footer .footer__col .textpic__media img {
    width: 100%;
    height: auto;
}

/* Keep third-party calendar and other HTML embeds inside the content width. */
.html-content {
    max-width: 100%;
}

.html-content iframe,
.html-content embed,
.html-content object {
    max-width: 100%;
}

/* Reusable availability calendar. Every instance is scoped to its own
 * container, so multiple calendars and shortcut records can share a page. */
.availability-calendar {
    --availability-grid-color: #eee;
    --availability-muted-color: #666;
    --availability-available-color: #686f61;
    --availability-arrival-background: rgba(218, 215, 187, 0.9);
    --availability-unavailable-color: #b40606;
    --availability-unavailable-background: rgba(180, 6, 6, 0.35);
    --availability-button-background: #f5f7fb;
    --availability-button-border: #d7dbe7;
    --availability-calendar-background: #cccac8;

    max-width: 100%;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

.availability-calendar__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.25rem 0 1.125rem;
    font-family: 'Playfair Display', serif;
}

.availability-calendar__nav-title {
    flex: 1 1 12rem;
    text-align: center;
    font-weight: 600;
}

.availability-calendar__button {
    appearance: none;
    border: 1px solid var(--availability-button-border);
    background: var(--availability-button-background);
    padding: 0.45rem 0.7rem;
    border-radius: 0.6rem;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.04s ease, background 0.15s ease, opacity 0.15s ease;
}

.availability-calendar__button:hover {
    background: #eef1f8;
}

.availability-calendar__button:active {
    transform: translateY(1px);
}

.availability-calendar__button:focus-visible {
    outline: 2px solid #9cc7ff;
    outline-offset: 2px;
}

.availability-calendar__button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.availability-calendar__button--primary {
    border-color: var(--availability-available-color);
    background: var(--availability-available-color);
    color: #fff;
}

.availability-calendar__button--primary:hover {
    background: var(--availability-available-color);
    filter: brightness(1.03);
}

.availability-calendar__heading {
    margin: 0 0 0.75rem;
    font-size: 1.6rem;
}

.availability-calendar__legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.375rem 0 1.125rem;
    font-size: 0.95rem;
}

.availability-calendar__dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-right: 0.5rem;
    border-radius: 50%;
}

.availability-calendar__dot--available {
    background: var(--availability-available-color);
}

.availability-calendar__dot--arrival {
    background: #dad7bb;
}

.availability-calendar__dot--unavailable {
    background: var(--availability-unavailable-color);
}

.availability-calendar__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0.75rem;
    border-radius: 0.2rem;
    background: var(--availability-calendar-background);
    opacity: 1;
    transition: opacity 0.35s ease;
}

.availability-calendar__grid--hidden {
    opacity: 0;
}

.availability-calendar__month {
    padding: 0.75rem;
    border: 1px solid var(--availability-grid-color);
    border-radius: 0.875rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.availability-calendar__month--visible {
    opacity: 1;
    transform: none;
}

.availability-calendar__month-title {
    margin: 0.25rem 0.375rem 0.625rem;
    font-size: 1.2rem;
}

.availability-calendar__month-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--availability-grid-color);
    border-left: 1px solid var(--availability-grid-color);
}

.availability-calendar__cell {
    position: relative;
    min-height: 3.4375rem;
    padding: 0.25rem;
    border-right: 1px solid var(--availability-grid-color);
    border-bottom: 1px solid var(--availability-grid-color);
}

.availability-calendar__cell:not(.availability-calendar__cell--status-X):not(.availability-calendar__weekday):hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.availability-calendar__weekday {
    min-height: auto;
    padding: 0.25rem 0;
    background: rgba(255, 255, 255, 0.35);
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
}

.availability-calendar__day-number {
    position: absolute;
    top: 0.25rem;
    right: 0.375rem;
    color: var(--availability-muted-color);
    font-size: 0.9rem;
}

.availability-calendar__status {
    position: absolute;
    left: 0.375rem;
    bottom: 0.375rem;
    color: var(--availability-available-color);
    font-size: 1rem;
    font-weight: 700;
}

.availability-calendar__status--X {
    color: var(--availability-unavailable-color);
}

.availability-calendar__cell--status-AV {
    background-color: var(--availability-arrival-background);
}

.availability-calendar__cell--status-X {
    background-color: var(--availability-unavailable-background);
}

.availability-calendar__cell--status-X .availability-calendar__day-number {
    color: #fff;
}

.availability-calendar__cell--today .availability-calendar__day-number {
    top: 0.25rem;
    right: 0.25rem;
    padding: 0.04rem 0.45rem;
    border-radius: 999px;
    background: rgba(104, 111, 97, 0.8);
    color: #fff;
    font-weight: 700;
}

.availability-calendar__error {
    grid-column: 1 / -1;
    margin: 0;
}

@media (max-width: 56.1875rem) {
    .availability-calendar__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 56.25rem) and (max-width: 74.9375rem) {
    .availability-calendar__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .availability-calendar__grid,
    .availability-calendar__month {
        transition: none;
    }
}

/* Bootstrap Package containers rendered inside Camino content components. */
.contentcontainer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-l, 2rem);
    width: 100%;
}

.contentcontainer-column {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: var(--spacing-m, 1.5rem);
}

/* Child elements already sit inside the container's content width. */
.contentcontainer-column > .component {
    --component-margin-vertical: 0;
    --component-padding-horizontal: 0;
    --component-padding-vertical: 0;

    background: transparent;
}

.contentcontainer-column > .component > .component__content {
    max-width: none;
}

@media (min-width: 48rem) {
    .contentcontainer[data-container-identifier='container_2_columns'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contentcontainer[data-container-identifier='container_2_columns_right'] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .contentcontainer[data-container-identifier='container_2_columns_left'] {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .contentcontainer[data-container-identifier='container_3_columns'] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contentcontainer[data-container-identifier='container_4_columns'] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .contentcontainer[data-container-identifier='container_2_columns_right'] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    .contentcontainer[data-container-identifier='container_2_columns_left'] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    }

    .contentcontainer[data-container-identifier='container_4_columns'] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}