/*
 * IFP Holiday Rentals – Design package presentation layer.
 *
 * This file contains presentation-only mappings. Functional behavior, queries,
 * forms, booking logic and JavaScript do not depend on these styles.
 *
 * "classic" does not receive .ifp-hr-design-active and therefore remains
 * visually identical to the established frontend.
 */

.ifp-hr-design-active {
  color: var(--ifp-hr-design-text);
  font-family: var(--ifp-hr-design-font-family);
  font-size: var(--ifp-hr-design-base-font-size);
}

.ifp-hr-design-active :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ifp-hr-design-text);
  font-family: var(--ifp-hr-design-heading-font-family);
  font-weight: var(--ifp-hr-design-heading-weight);
}

.ifp-hr-rental-detail.ifp-hr-design-active,
.ifp-hr-rentals-wrap.ifp-hr-design-active {
  max-width: var(--ifp-hr-design-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ifp-hr-design-active .ifp-hr-rental-card,
.ifp-hr-design-active .ifp-hr-rental-detail__section,
.ifp-hr-design-active .ifp-hr-rental-detail__fact,
.ifp-hr-design-active .ifp-hr-rental-filter,
.ifp-hr-design-active.ifp-hr-inquiry,
.ifp-hr-design-active .ifp-hr-inquiry,
.ifp-hr-design-active.ifp-hr-wc-booking-fields,
.ifp-hr-design-active .ifp-hr-wc-booking-fields,
.ifp-hr-design-active.ifp-hr-wc-booking-summary {
  border-color: var(--ifp-hr-design-border);
  border-radius: var(--ifp-hr-design-radius);
  background: var(--ifp-hr-design-surface);
  box-shadow: var(--ifp-hr-design-shadow);
  color: var(--ifp-hr-design-text);
}

.ifp-hr-design-active .ifp-hr-rental-detail__header,
.ifp-hr-design-active .ifp-hr-rental-card__facts li,
.ifp-hr-design-active .ifp-hr-inquiry__rules-hint {
  background: var(--ifp-hr-design-surface-alt);
}

.ifp-hr-design-active .ifp-hr-rental-card__location,
.ifp-hr-design-active .ifp-hr-rental-card__excerpt,
.ifp-hr-design-active .ifp-hr-rental-detail__location,
.ifp-hr-design-active .ifp-hr-rental-detail__fact-label,
.ifp-hr-design-active .ifp-hr-rental-detail__price-note,
.ifp-hr-design-active .ifp-hr-inquiry__intro,
.ifp-hr-design-active .ifp-hr-wc-booking-fields__help {
  color: var(--ifp-hr-design-muted);
}

.ifp-hr-design-active .ifp-hr-rental-card__button,
.ifp-hr-design-active .ifp-hr-rental-filter__button,
.ifp-hr-design-active .ifp-hr-rental-detail__button,
.ifp-hr-design-active .ifp-hr-inquiry__submit,
.ifp-hr-design-active .ifp-hr-button:not(.ifp-hr-button--ghost),
.ifp-hr-design-active button[type="submit"] {
  background: var(--ifp-hr-design-accent);
  color: var(--ifp-hr-design-accent-contrast);
  border-color: var(--ifp-hr-design-accent);
  border-radius: var(--ifp-hr-design-radius);
}

.ifp-hr-design-active .ifp-hr-rentals {
  gap: calc(var(--ifp-hr-design-gap) * var(--ifp-hr-design-density));
}

.ifp-hr-rental-detail.ifp-hr-design-active {
  gap: calc(var(--ifp-hr-design-gap) * var(--ifp-hr-design-density));
}

.ifp-hr-rental-detail.ifp-hr-design-active .ifp-hr-rental-detail__section-row--content-sidebar {
  grid-template-columns: var(--ifp-hr-design-detail-columns);
  gap: calc(var(--ifp-hr-design-gap) * var(--ifp-hr-design-density));
}

.ifp-hr-design-active.ifp-hr-design-scope--links {
  color: var(--ifp-hr-design-text);
}

/* Lightbox is portaled below <body>, so it receives the design class itself. */
body > .ifp-hr-gallery-lightbox.ifp-hr-design-active[data-ifp-hr-gallery-portaled="1"] {
  background: var(--ifp-hr-design-lightbox-backdrop) !important;
}

body > .ifp-hr-gallery-lightbox.ifp-hr-design-active[data-ifp-hr-gallery-portaled="1"] > .ifp-hr-gallery-lightbox__backdrop {
  background: var(--ifp-hr-design-lightbox-backdrop) !important;
}

body > .ifp-hr-gallery-lightbox.ifp-hr-design-active[data-ifp-hr-gallery-portaled="1"] .ifp-hr-gallery-lightbox__panel,
body > .ifp-hr-gallery-lightbox.ifp-hr-design-active[data-ifp-hr-gallery-portaled="1"] .ifp-hr-gallery-lightbox__topbar,
body > .ifp-hr-gallery-lightbox.ifp-hr-design-active[data-ifp-hr-gallery-portaled="1"] .ifp-hr-gallery-lightbox__meta {
  background: var(--ifp-hr-design-lightbox-panel) !important;
}


/* v1.25.01 – presentation-only output controls from portable design packages. */
.ifp-hr-design-active.ifp-hr-design-scope--detail .ifp-hr-rental-detail__gallery-item--main .ifp-hr-rental-detail__gallery-image {
  min-height: var(--ifp-hr-design-detail-gallery-height);
}

.ifp-hr-design-active.ifp-hr-design-scope--detail .ifp-hr-rental-detail__section-row--content-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(240px, var(--ifp-hr-design-detail-sidebar-width));
}

.ifp-hr-design-active.ifp-hr-design-scope--list .ifp-hr-rentals {
  grid-template-columns: repeat(var(--ifp-hr-design-list-columns), minmax(0, 1fr));
}

.ifp-hr-design-active.ifp-hr-design-scope--list .ifp-hr-rental-card__image-link {
  aspect-ratio: var(--ifp-hr-design-list-image-ratio);
}

.ifp-hr-design-active.ifp-hr-design-scope--filter .ifp-hr-rental-filter__grid {
  grid-template-columns: repeat(var(--ifp-hr-design-filter-columns), minmax(0, 1fr)) minmax(150px, auto);
}

.ifp-hr-design-active.ifp-hr-design-scope--inquiry {
  max-width: var(--ifp-hr-design-inquiry-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ifp-hr-design-active.ifp-hr-design-scope--links {
  display: flex;
  flex-direction: var(--ifp-hr-design-links-direction);
  flex-wrap: wrap;
  gap: var(--ifp-hr-design-gap);
}

.ifp-hr-design-active.ifp-hr-design-scope--woocommerce .ifp-hr-wc-booking-fields__grid {
  grid-template-columns: repeat(var(--ifp-hr-design-woocommerce-columns), minmax(0, 1fr));
}

@media (max-width: 900px) {
  .ifp-hr-design-active.ifp-hr-design-scope--filter .ifp-hr-rental-filter__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ifp-hr-design-active.ifp-hr-design-scope--list .ifp-hr-rentals,
  .ifp-hr-design-active.ifp-hr-design-scope--filter .ifp-hr-rental-filter__grid,
  .ifp-hr-design-active.ifp-hr-design-scope--woocommerce .ifp-hr-wc-booking-fields__grid {
    grid-template-columns: 1fr;
  }

  .ifp-hr-design-active.ifp-hr-design-scope--detail .ifp-hr-rental-detail__section-row--content-sidebar {
    grid-template-columns: 1fr;
  }
}