/**
 * Call to Action block styles (frontend + editor).
 *
 * Ported from CozyStay's `.cs-cta` styles, renamed to the theme's
 * `accommodate-` BEM prefix and adapted to logical properties.
 *
 * @package Accommodate
 */

.accommodate-cta {
  --cta-border-color: var(--color-primary);
  --cta-overlay-hover-opacity: 0.3;
  inline-size: 100%;
  container-type: inline-size;
  container-name: accommodate-cta;
}

.accommodate-cta__wrap {
  position: relative;
  overflow: hidden;
}

.accommodate-cta__link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
}

.accommodate-cta__image {
  position: relative;
  overflow: hidden;
}

.accommodate-cta__image img {
  display: block;
  width: 100%;
  transition: transform var(--transition-base);
}

/* Normal layout: the image box follows the block's aspect-ratio setting so
   card tops stay aligned across a grid when CTAs share the same ratio. */
.accommodate-cta--normal .accommodate-cta__image img {
  aspect-ratio: var(--accommodate-cta-aspect, 3 / 4);
  object-fit: cover;
}

.accommodate-cta__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
  transition: opacity var(--transition-base);
}

/* The dark gradient only applies over the image (overlap layout); the
   normal layout keeps the content area below the image transparent. */
.accommodate-cta--overlap .accommodate-cta__overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.2));
}

.no-touch .accommodate-cta:hover .accommodate-cta__overlay {
  opacity: var(--cta-overlay-hover-opacity);
}

.accommodate-cta__label {
  z-index: 9;
  position: absolute;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-xs);
  text-transform: uppercase;
  pointer-events: none;
}

.accommodate-cta__label--top-left {
  inset-block-start: var(--space-lg);
  inset-inline-start: var(--space-lg);
}

.accommodate-cta__label--top-right {
  inset-block-start: var(--space-lg);
  inset-inline-end: var(--space-lg);
}

.accommodate-cta__label--bottom-left {
  inset-block-end: var(--space-lg);
  inset-inline-start: var(--space-lg);
}

.accommodate-cta__label--bottom-right {
  inset-block-end: var(--space-lg);
  inset-inline-end: var(--space-lg);
}

.accommodate-cta__label--centered {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

.accommodate-cta__content {
  z-index: 9;
  width: 100%;
  pointer-events: none;
  background-color: var(--cta-content-bg, transparent);
}

.accommodate-cta__content > * {
  margin-block-end: var(--space-sm);
}

.accommodate-cta__content .accommodate-cta__subtitle-wrap:last-child {
  margin-block-end: 0;
}

.accommodate-cta__subtitle-wrap {
  overflow: clip;
}

.accommodate-cta__content a {
  pointer-events: auto;
}

.accommodate-cta__subtitle {
  position: relative;
  display: inline-block;
  margin-block-end: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-label-text);
}

.accommodate-cta__subtitle--underline {
  border-block-end: 2px solid var(--color-primary);
}

.accommodate-cta__subtitle--bordered {
  max-width: calc(100% - 100px);
}

.accommodate-cta__subtitle--bordered::before,
.accommodate-cta__subtitle--bordered::after {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: block;
  width: 70px;
  height: 1px;
  background: currentColor;
  content: "";
}

.accommodate-cta__subtitle--bordered::before {
  inset-inline-start: -95px;
}

.accommodate-cta__subtitle--bordered::after {
  inset-inline-end: -95px;
}

.accommodate-cta__title {
  display: grid;
  align-content: center;
  margin-block-start: 0;
  margin-block-end: 0;
  line-height: var(--leading-tight);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--color-text);
}

.accommodate-cta__title small {
  font-weight: 300;
  font-size: 100%;
}

.accommodate-cta__text {
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-light);
}

.accommodate-cta__text p {
  margin-block-end: var(--space-sm);
}

.accommodate-cta__text p:last-child {
  margin-block-end: 0;
}

.accommodate-cta__button-wrap--slide-up {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height var(--transition-base), opacity var(--transition-base);
}

.no-touch .accommodate-cta:hover .accommodate-cta__button-wrap--slide-up {
  max-height: 200px;
  opacity: 1;
}

/* Overlap layout */
.accommodate-cta--overlap {
  /* Keeps the block from collapsing to zero height when no image is set,
     since all its children are absolutely positioned. */
  min-block-size: 320px;
}

.accommodate-cta--overlap .accommodate-cta__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-xl);
}

.accommodate-cta--overlap .accommodate-cta__image img {
  height: 100%;
  object-fit: cover;
}

.accommodate-cta--top .accommodate-cta__content {
  justify-content: flex-start;
}

.accommodate-cta--middle .accommodate-cta__content {
  justify-content: center;
}

.accommodate-cta--bottom .accommodate-cta__content {
  justify-content: flex-end;
}

/* Normal layout */
.accommodate-cta--normal .accommodate-cta__content {
  padding-block-start: var(--space-xl);
}

.accommodate-cta--normal .accommodate-cta__content > * {
  margin-block-end: var(--space-md);
}

/* Element alignment (each element aligned individually, no global) */
.accommodate-cta__subtitle-wrap--left,
.accommodate-cta__title--left,
.accommodate-cta__button-wrap--left {
  align-self: flex-start;
  text-align: start;
}

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

.accommodate-cta__subtitle-wrap--center,
.accommodate-cta__title--center,
.accommodate-cta__button-wrap--center {
  align-self: center;
  text-align: center;
}

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

.accommodate-cta__subtitle-wrap--right,
.accommodate-cta__title--right,
.accommodate-cta__button-wrap--right {
  align-self: flex-end;
  text-align: end;
}

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

/* Image hover effects */
.no-touch .accommodate-cta--zoom-in:hover .accommodate-cta__image img {
  transform: scale(1.07);
}

.accommodate-cta--zoom-out .accommodate-cta__image img {
  transform: scale(1.07);
}

.no-touch .accommodate-cta--zoom-out:hover .accommodate-cta__image img {
  transform: scale(1);
}

/* Text visibility */
.accommodate-cta--hover-show .accommodate-cta__content {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.no-touch .accommodate-cta--hover-show:hover .accommodate-cta__content {
  opacity: 1;
}

.accommodate-cta--hover-hide .accommodate-cta__content {
  transition: opacity var(--transition-base);
}

.no-touch .accommodate-cta--hover-hide:hover .accommodate-cta__content {
  opacity: 0;
}

/* Inner border */
.accommodate-cta--inner-border {
  --border-position: 10px;
}

.accommodate-cta--inner-border .accommodate-cta__content::before,
.accommodate-cta--inner-border .accommodate-cta__content::after {
  position: absolute;
  inset-block-start: var(--border-position);
  inset-inline-end: var(--border-position);
  inset-block-end: var(--border-position);
  inset-inline-start: var(--border-position);
  color: var(--cta-border-color);
  content: "";
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.accommodate-cta--inner-border .accommodate-cta__content::before {
  border-block-start: 1px solid;
  border-block-end: 1px solid;
}

.accommodate-cta--inner-border .accommodate-cta__content::after {
  border-inline-end: 1px solid;
  border-inline-start: 1px solid;
}

.accommodate-cta--inner-border.accommodate-cta--hover-show .accommodate-cta__content::before,
.accommodate-cta--inner-border.accommodate-cta--hover-show .accommodate-cta__content::after {
  opacity: 0;
}

.accommodate-cta--inner-border.accommodate-cta--hover-show .accommodate-cta__content::before {
  transform: scale(0, 1);
}

.accommodate-cta--inner-border.accommodate-cta--hover-show .accommodate-cta__content::after {
  transform: scale(1, 0);
}

.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-show:hover .accommodate-cta__content::before,
.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-show:hover .accommodate-cta__content::after {
  opacity: 1;
  transform: scale(1);
}

.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-hide:hover .accommodate-cta__content::before,
.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-hide:hover .accommodate-cta__content::after {
  opacity: 0;
}

.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-hide:hover .accommodate-cta__content::before {
  transform: scale(0, 1);
}

.no-touch .accommodate-cta--inner-border.accommodate-cta--hover-hide:hover .accommodate-cta__content::after {
  transform: scale(1, 0);
}

/* Image offset border */
.accommodate-cta--offset-border {
  --offset: -10px;
  --offset-revert: calc(0px - var(--offset));
}

.accommodate-cta--offset-border .accommodate-cta__wrap {
  overflow: visible;
}

.accommodate-cta--offset-border .accommodate-cta__image-wrap {
  position: relative;
}

.accommodate-cta--offset-border .accommodate-cta__offset-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--cta-border-color);
  transform: translate(var(--offset), var(--offset));
  transition: all var(--transition-base);
  will-change: transform, width, height;
}

.no-touch .accommodate-cta--offset-border:hover .accommodate-cta__offset-border {
  transform: translate(var(--offset-revert), var(--offset-revert));
  width: calc(100% + var(--offset) * 2);
  height: calc(100% + var(--offset) * 2);
}

/* Color schemes */
.accommodate-cta--light .accommodate-cta__title,
.accommodate-cta--light .accommodate-cta__text,
.accommodate-cta--light .accommodate-btn--underline {
  color: var(--color-text-inverse);
}

.accommodate-cta--light .accommodate-cta__subtitle {
  color: var(--color-primary-light);
}

.accommodate-cta--dark .accommodate-cta__title,
.accommodate-cta--dark .accommodate-cta__text,
.accommodate-cta--dark .accommodate-btn--underline {
  color: var(--color-text);
}

.accommodate-cta--dark .accommodate-cta__subtitle {
  color: var(--color-secondary);
}

/* Make overlay text readable over the image by default. */
.accommodate-cta--overlap .accommodate-cta__title,
.accommodate-cta--overlap .accommodate-cta__text,
.accommodate-cta--overlap .accommodate-btn--underline {
  color: var(--color-text-inverse);
}

.accommodate-cta--overlap .accommodate-cta__subtitle {
  color: var(--color-primary-light);
}

/* Button inside CTA — underline uses the listings "Read More" gradient:
   the text is clipped to a two-tone gradient showing `--accommodate-btn-color`
   by default and sliding to `--accommodate-btn-color-hover` on hover. */
.accommodate-cta .accommodate-btn--underline,
.accommodate-cta .accommodate-btn--underline:hover,
.no-touch .accommodate-cta .accommodate-btn--underline:hover {
  --accommodate-btn-color-hover: var(--color-primary);
  padding-block-end: 0.375rem;
  background-image: linear-gradient(90deg, var(--accommodate-btn-color-hover) 0 50%, var(--accommodate-btn-color) 50% 100%);
  background-position: 100% 0;
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position var(--transition-fast);
}

.no-touch .accommodate-cta .accommodate-btn--underline:hover,
.accommodate-cta .accommodate-btn--underline:hover {
  background-position: 0 0;
}

.accommodate-cta--overlap .accommodate-btn--underline {
  --accommodate-btn-color: var(--color-text-inverse);
  --accommodate-btn-color-hover: var(--color-primary-light);
}

/* Hover color presets override the default hover color (higher specificity). */
.accommodate-cta .accommodate-btn--hover-primary {
  --accommodate-btn-color-hover: var(--color-primary);
}

.accommodate-cta .accommodate-btn--hover-secondary {
  --accommodate-btn-color-hover: var(--color-secondary);
}

.accommodate-cta .accommodate-btn--hover-black {
  --accommodate-btn-color-hover: #000;
}

.accommodate-cta .accommodate-btn--hover-white {
  --accommodate-btn-color-hover: #fff;
}

@media (hover: none) {
  .accommodate-cta__button-wrap--slide-up {
    max-height: 200px;
    opacity: 1;
  }

  .accommodate-cta--hover-show .accommodate-cta__content,
  .accommodate-cta--hover-hide .accommodate-cta__content {
    opacity: 1;
  }
}