/* =========================================================================
   Rise Urban Art Hotel — componentes das páginas institucionais
   (hero, seções de instalações, quartos, galerias, textos legais…)
   ========================================================================= */

/* ------------------------------ Hero de página ------------------------------
   style="--bg:url(…); --bg-pos:50% 70%; --overlay:.5" vem do Elementor de cada página. */
.hero {
  position: relative; isolation: isolate;
  padding: 160px var(--gutter);
  background: var(--bg, none) var(--bg-pos, center) / cover no-repeat var(--c-text);
  color: var(--c-white);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-text); opacity: var(--overlay, .5); }
.hero__inner { max-width: 1200px; margin-inline: auto; padding: 10px; display: flex; justify-content: flex-end; }
.hero__title { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; letter-spacing: 0; }
.hero__title span { display: inline-block; padding-right: 10px; border-right: 10px solid currentColor; }
@media (max-width: 1024px) {
  .hero { padding: 105px var(--gutter); }
  .hero__inner { padding: 15px 30px; }
  .hero__title span { border-right-width: 7px; }
}
@media (max-width: 767px) {
  .hero { padding: 98px var(--gutter); background-image: var(--bg-mobile, var(--bg, none)); background-position: center; }
  .hero__inner { padding: 14px; }
}

/* Variante "quarto": palavra gigante translúcida atrás do título + botão */
.hero--room .hero__inner { position: relative; flex-direction: column; align-items: center; text-align: center; }
.hero__ghost {
  position: absolute; left: 0; right: 0; top: -42px; z-index: -1; margin: 0;
  font-size: 200px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: rgba(255, 255, 255, .2);
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
.hero--room .hero__title { font-size: var(--fs-h1); line-height: 1; letter-spacing: 7px; }
.hero--room .btn { margin-top: 20px; }
@media (max-width: 1024px) { .hero__ghost { font-size: 120px; top: -20px; } }
@media (max-width: 767px) { .hero__ghost { display: none; } }

/* ------------------------------ Introdução com caixas de ícone ------------------------------ */
.intro { padding: 96px var(--gutter) 64px; text-align: center; }
.intro__inner { max-width: var(--container); margin-inline: auto; padding: 10px; }
.intro .headline { margin-top: 20px; }
.intro__text { max-width: 600px; margin: 20px auto 0; }
.intro__boxes { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.iconbox--lg { padding: 32px; }
.iconbox__heading { margin: 23px 0 16px; font-size: var(--fs-h4); font-weight: 600; line-height: 1.1; }
.iconbox--lg p { margin: 0; }
.iconbox__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 1024px) {
  .intro { padding: 60px 15px 30px; }
  .iconbox--lg { padding: 15px; }
}
@media (max-width: 767px) {
  .intro { padding: 42px var(--gutter) 14px; }
  .intro__boxes { grid-template-columns: 1fr; }
  .iconbox--lg { padding: 14px; }
}

/* ------------------------------ Faixa com fundo de padrão ------------------------------ */
.pattern-banner {
  position: relative; isolation: isolate; padding: 80px var(--gutter);
  background: url("/wp-content/uploads/2024/03/seamless_pattern03.png") center / cover;
}
.pattern-banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(245, 245, 245, .95); }
.pattern-banner__inner { display: grid; grid-template-columns: 1fr 1fr; max-width: var(--container); margin-inline: auto; padding: 20px; }
.pattern-banner .headline { padding: 10px; }
.pattern-banner__body { padding: 10px 10px 32px; }
.pattern-banner__body .btn { margin-top: 20px; }
@media (max-width: 1024px) { .pattern-banner { padding: 60px 15px; } }
@media (max-width: 767px) {
  .pattern-banner { padding: 42px var(--gutter); }
  .pattern-banner__inner { grid-template-columns: 1fr; padding: 10px; }
}

/* ------------------------------ Carrossel de fotos + texto + contadores ------------------------------ */
.photo-split { display: grid; grid-template-columns: 55% 45%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: 112px var(--gutter); }
.photo-split__media { padding: 16px; background: linear-gradient(140deg, var(--c-primary) 15%, transparent 15%); min-width: 0; }
.photo-carousel { border: solid var(--c-white); border-width: 12px 12px 5px; background: var(--c-white); box-shadow: 0 10px 50px rgba(0, 0, 0, .25); padding-bottom: 30px; }
.photo-carousel .carousel__slide { margin: 0; }
.photo-carousel img { width: 100%; height: 405px; object-fit: cover; }
.carousel__prev, .carousel__next {
  position: absolute; top: calc(50% - 30px); z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 25px; height: 25px; padding: 0; border: 0; background: none; color: var(--c-white); cursor: pointer; filter: drop-shadow(0 0 2px rgba(0,0,0,.4));
}
.carousel__prev { left: -2px; }
.carousel__next { right: -2px; }
.carousel__prev .icon, .carousel__next .icon { width: 20px; height: 20px; }
.carousel__dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 12px; }
.carousel__dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #000; opacity: .2; cursor: pointer; }
.carousel__dot[aria-current="true"] { opacity: 1; }
.photo-split__content { padding: 16px 16px 16px 64px; }
.photo-split .headline { max-width: 400px; margin: 20px 0 16px; }
.photo-split .prose { margin-bottom: 20px; }
.photo-split__content > .btn { margin-bottom: 16px; }
.photo-split__counters {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px;
  background: url("/wp-content/uploads/2024/03/seamless_pattern03.png") left top / cover;
}
.photo-split__counters::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-white); opacity: .5; }
.counter { padding: 10px; color: var(--c-secondary); }
.counter__number { margin: 0; font-size: var(--fs-h2); font-weight: 700; line-height: 1.1; }
.counter__label { margin: 0; font-size: 16px; font-weight: 500; line-height: 40px; text-transform: uppercase; }
@media (max-width: 1024px) {
  .photo-split { padding: 60px 15px; }
  .photo-carousel img { height: 300px; }
  .photo-split__content { padding: 15px; }
}
@media (max-width: 767px) {
  .photo-split { grid-template-columns: 1fr; padding: 42px var(--gutter); }
  .photo-carousel img { height: 220px; }
  .photo-split__content { padding: 28px 14px 14px; }
  .counter__label { line-height: 1.5; }
}
.iconbox--lg .iconbox__icon { color: var(--c-bg-light-2); }

/* ------------------------------ Home: slider de destaques ------------------------------ */
.hero-slider { --per-view: 1; --gap: 0px; }
.el-sec:has(.hero-slider) { z-index: 1; } /* como o Swiper do Elementor: o hero fica por cima da secção seguinte quando ela tem margem negativa (celular) */
.hero-slide {
  position: relative; isolation: isolate; display: flex; align-items: center; height: 720px; overflow: hidden;
  padding: 0 160px; color: var(--c-white); background: var(--c-secondary);
}
.hero-slide__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1); }
.hero-slide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sov, rgba(0, 0, 0, .3)); }
.hero-slide--kb[aria-hidden="false"] .hero-slide__bg { transform: scale(1.3); transition: transform 10s linear; }
.hero-slide__content { max-width: 50%; }
.hero-slide__title { margin: 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1; letter-spacing: 7px; }
.hero-slide__text { margin: 30px 0; font-size: 20px; font-weight: 400; line-height: 1.5; }
.hero-slide__btn { border: 2px solid var(--c-accent); }
.hero-slider .carousel__prev, .hero-slider .carousel__next { top: calc(50% - 12px); }
.hero-slider .carousel__prev { left: 15px; } .hero-slider .carousel__next { right: 15px; }
@media (max-width: 1024px) {
  .hero-slide { height: 560px; padding: 0 60px; }
  .hero-slide__text { font-size: 17px; line-height: 1.3; }
}
@media (max-width: 767px) {
  .hero-slide { height: 580px; padding: 0 0 70px 42px; }
  .hero-slide__content { max-width: 80%; }
  .hero-slide__text { font-size: 16px; }
}

/* ------------------------------ Home: busca de disponibilidade ------------------------------ */
.el-col:has(> .search-form) { position: relative; z-index: 3; margin-top: -36px; box-shadow: 0 10px 60px rgba(0, 0, 0, .25); }
.search-form { display: flex; flex-wrap: wrap; row-gap: 10px; margin: 0 -5px; }
.search-form__field { width: var(--fw, 100%); padding: 0 5px; }
.search-form label { display: block; font-family: var(--font-cond); font-weight: 500; line-height: 1.5; text-transform: uppercase; }
/* o cartão da busca fica por cima da seção seguinte (que sobe com margem negativa), como no site atual */
.el-sec:has(.search-form), .el-con:has(.search-form) { position: relative; z-index: 4; }
.search-form button[type="submit"] { min-height: 59px; }
.search-form input { height: 42px; padding: 6px 12px; border: 1px solid var(--c-bg-light-2); background: var(--c-white); }
.search-form__submit { margin-top: 0; }
@media (max-width: 767px) {
  .search-form__field { width: 50%; }
  .search-form__submit { width: 100%; }
  .el-col:has(> .search-form) { margin-top: 0; }
  .el-sec:has(.search-form) { display: none; } /* no celular o site atual esconde a busca */
}

/* Cards de quarto (foto "Starting €…" + nome, capacidade e "View room"): nome e capacidade à esquerda,
   botão à direita e centrado na vertical, em todas as larguras (no Elementor o botão caía para baixo no tablet/celular). */
.cta-card + .el-sec--inner > .el-row { flex-wrap: wrap; align-items: center; } /* o botão só desce se não couber ao lado */
.cta-card + .el-sec--inner .icon-list__icon:empty { display: none; } /* capacidade alinhada com o nome */
.cta-card + .el-sec--inner .icon-list__icon:empty + .icon-list__text { padding-left: 0; }
.cta-card + .el-sec--inner > .el-row > .el-col:first-child { flex: 1 1 auto; width: auto; }
.cta-card + .el-sec--inner .icon-list__text { white-space: nowrap; }
.cta-card + .el-sec--inner > .el-row > .el-col:last-child { flex: none; width: auto; }
@media (max-width: 1024px) {
  .cta-card + .el-sec--inner > .el-row > .el-col:first-child { padding: 1em .5em 1em 1em; }
  .cta-card + .el-sec--inner > .el-row > .el-col:last-child { padding: 1em 1em 1em .5em; }
}
@media (max-width: 767px) {
  .cta-card + .el-sec--inner > .el-row > .el-col:first-child { padding: 1em .5em 1em 1.6em; }
  .cta-card + .el-sec--inner > .el-row > .el-col:last-child { padding: 1em 1.6em 1em .5em; }
}