/*
Theme Name: GeneratePress-Child
Template: generatepress
Theme URI: https://generatepress.com
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Version: 3.6.1
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, footer-widgets, blog, e-commerce, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, rtl-language-support, featured-images, theme-options

GeneratePress, Copyright 2014-2025 EDGE22 Studios LTD.
GeneratePress is distributed under the terms of the GNU GPL

GeneratePress is based on Underscores http://underscores.me/, (C) 2012-2025 Automattic, Inc.

Actual CSS can be found in /assets/css/ folder.
*/

/* =========================================================
   1. GLOBAL / BASE
========================================================= */

:root {
  --cap-serif: Georgia, "Times New Roman", Times, serif;
  --cap-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.site-logo,
.site-branding {
  margin-bottom: 0.5em;
}

.top-bar .inside-top-bar {
  display: none;
}

.site-header .header-widget {
  margin-top: 0.2em;
}

.inside-header {
  padding: 10px 20px;
}

.one-container .site-content {
  padding: 0;
}

.entry-title {
  margin-bottom: 0;
  text-align: center;
  padding-top: 30px;
}

.entry-content:not(:first-child),
.entry-summary:not(:first-child),
.page-content:not(:first-child) {
  padding: 20px;
}

/* =========================================================
   2. NAVIGATION
========================================================= */

.main-navigation.toggled .main-nav li {
  width: 100%;
  text-align: center;
}

.main-navigation .main-nav ul li a {
  line-height: 50px;
}

.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus,
.has-inline-mobile-toggle #site-navigation.toggled {
  background-color: transparent;
}

/* Primary Menu */
.main-navigation .main-nav ul li > a {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #10273F;
  line-height: 1.2;
}

.main-navigation .main-nav ul li > a:hover,
.main-navigation .main-nav ul li > a:focus,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li.current-menu-ancestor > a {
  color: #1B3552;
}

/* Header Reservations button */
.main-navigation .main-nav ul li.reservations-btn > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  background: #10273F;
  color: #fff !important;
  border: 1px solid #10273F;
  border-radius: 999px;
  line-height: 1;
}

.main-navigation .main-nav ul li.reservations-btn > a:hover,
.main-navigation .main-nav ul li.reservations-btn > a:focus {
  background: #1B3552;
  border-color: #1B3552;
  color: #fff !important;
}

/* =========================================================
   3. HOME PAGE - BASE
========================================================= */

.capriccio-home {
  --cap-bg: #f6f2ec;
  --cap-bg-soft: #fbf8f3;
  --cap-bg-alt: #f2ece4;
  --cap-surface: #ffffff;
  --cap-text: #314154;
  --cap-heading: #24364b;
  --cap-accent: #183b6b;
  --cap-accent-hover: #0f2d55;
  --cap-line: #d9cbb7;
  --cap-border: #e5ddd2;
  --cap-muted: #697586;
  --cap-shadow: 0 18px 40px rgba(19, 35, 54, 0.08);
  --cap-radius: 0;
  --cap-max: 1400px;
  --cap-space: 96px;
  --cap-space-lg: 120px;
  color: var(--cap-text);
  background: var(--cap-bg-soft);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  overflow-x: clip;
}

.capriccio-home *,
.capriccio-home *::before,
.capriccio-home *::after {
  box-sizing: border-box;
}

.capriccio-home img {
  display: block;
  width: 100%;
  height: auto;
}

.capriccio-home a {
  color: inherit;
  text-decoration: none;
}

.capriccio-home h1,
.capriccio-home h2 {
  margin: 0;
  color: var(--cap-heading);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.capriccio-home h1 {
  font-size: clamp(3rem, 6vw, 5.6rem);
  
}

.capriccio-home h2 {
  font-size: clamp(2rem, 3.6vw, 3.6rem);
  max-width: 12ch;
}

.capriccio-home p {
  margin: 0;
  color: var(--cap-text);
}

.capriccio-eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  color: var(--cap-accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.capriccio-divider {
  width: 44px;
  height: 2px;
  margin: 28px 0;
  background: var(--cap-line);
}

.capriccio-divider--small {
  margin: 24px 0 26px;
}

.capriccio-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  color: var(--cap-accent) !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.capriccio-link::after {
  content: "→";
  font-size: 1rem;
  line-height: 1;
}

.capriccio-link:hover,
.capriccio-link:focus-visible {
  color: var(--cap-accent-hover) !important;
}

/* =========================================================
   4. BUTTONS
========================================================= */

.capriccio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--cap-accent);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.capriccio-btn:hover,
.capriccio-btn:focus-visible {
  transform: translateY(-1px);
}

.capriccio-btn--primary {
  background: var(--cap-accent);
  color: #ffffff;
}

.capriccio-btn--primary:hover,
.capriccio-btn--primary:focus-visible {
  background: var(--cap-accent-hover);
  border-color: var(--cap-accent-hover);
  color: #ffffff;
}

.capriccio-btn--secondary {
  background: rgba(255, 255, 255, 0.75);
  color: var(--cap-heading);
  border-color: rgba(36, 54, 75, 0.24);
  backdrop-filter: blur(2px);
}

.capriccio-btn--secondary:hover,
.capriccio-btn--secondary:focus-visible {
  background: #ffffff;
  border-color: var(--cap-accent);
  color: var(--cap-accent);
}

.capriccio-btn--secondary,
.capriccio-btn--secondary:visited {
  color: var(--cap-heading) !important;
}

.capriccio-btn--primary,
.capriccio-btn--primary:visited {
  color: #ffffff !important;
}

/* =========================================================
   5. HOME PAGE - HERO
   Structure: transparent site header sits over the hero;
   the hero itself contains two visual rows: header space + copy.
========================================================= */

/* Homepage only: remove GeneratePress/Gutenberg top spacing */
body:has(.capriccio-home) .site-content,
body:has(.capriccio-home) .content-area,
body:has(.capriccio-home) .site-main,
body:has(.capriccio-home) .inside-article,
body:has(.capriccio-home) .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body:has(.capriccio-home) .entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Homepage only: actual GeneratePress header becomes transparent over the hero.
   Header size/padding/logo are NOT changed, so it matches the rest of the site. */
body:has(.capriccio-home) .site-header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.capriccio-home) .main-navigation,
body:has(.capriccio-home) .main-navigation .inside-navigation {
  background: transparent !important;
}




.capriccio-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: #ddd7ce;
  background-image: url("https://capriccio-naxos.com/wp-content/uploads/2026/05/ChatGPT-Image-May-20-2026-06_22_43-PM.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.capriccio-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(248, 244, 238, 0.80) 0%,
    rgba(248, 244, 238, 0.68) 24%,
    rgba(248, 244, 238, 0.24) 48%,
    rgba(248, 244, 238, 0.06) 70%,
    rgba(248, 244, 238, 0) 100%
  );
}

.capriccio-hero__inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--cap-max));
  min-height: 100svh;
  margin: 0 auto;
  padding: 0 48px 90px;
  display: flex;
  flex-direction: column;
}

/* Visual row reserved for the real transparent header above the hero. */
.capriccio-hero__header-space {
  flex: 0 0 118px;
}

/* The text/CTA is a separate layer, independent from the header. */
.capriccio-hero__copy {
  max-width: 560px;
  margin-top: clamp(36px, 7vh, 92px);
}

@media (min-width: 768px) {
  .capriccio-hero h1,
  .capriccio-hero .capriccio-eyebrow,
  .capriccio-hero__text {
    color: var(--cap-heading) !important;
  }

  .capriccio-hero h1 {
    text-shadow: none;
  }

  .capriccio-hero .capriccio-divider {
    background: var(--cap-line);
  }
}

.capriccio-hero__text {
  max-width: 38ch;
  font-size: 1.22rem;
}

.capriccio-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* =========================================================
   6. HOME PAGE - DISCOVER
========================================================= */

.capriccio-discover {
  padding: 0;
  background: var(--cap-bg-soft);
}

.capriccio-discover__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cap-border);
}

.capriccio-card {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(280px, 1.05fr);
  background: var(--cap-bg-soft);
  min-height: 500px;
}

.capriccio-card__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 52px;
}

.capriccio-card__content h2 {
  max-width: 11ch;
  font-size: clamp(2rem, 2.8vw, 3.1rem);
  text-wrap: initial;
}

.capriccio-card__content p:not(.capriccio-eyebrow) {
  max-width: 26ch;
  color: #566272;
}

.capriccio-card__media {
  min-width: 0;
}

.capriccio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   7. HOME PAGE - STORY
========================================================= */

.capriccio-story {
  padding: var(--cap-space-lg) 0;
  background: #f1ece5;
}

.capriccio-story__grid {
  width: min(100%, var(--cap-max));
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: stretch;
}

.capriccio-story__media {
  min-width: 0;
}

.capriccio-story__media img {
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.capriccio-story__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cap-bg-soft);
  padding: 64px 56px;
}

.capriccio-story__content h2 {
  max-width: 10ch;
}

.capriccio-story__content p:not(.capriccio-eyebrow) {
  max-width: 34ch;
}

/* =========================================================
   8. HOME PAGE - REVIEWS
========================================================= */

.capriccio-reviews {
  padding: var(--cap-space) 0;
  background: #f1ece5;
}

.capriccio-reviews__inner {
  width: min(100%, var(--cap-max));
  margin: 0 auto;
  padding: 0 48px;
}

.capriccio-reviews__intro {
  max-width: 720px;
  margin: 0 auto 46px;
  text-align: center;
}

.capriccio-reviews__intro .capriccio-eyebrow {
  margin-bottom: 14px;
}

.capriccio-reviews__intro h2 {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.capriccio-reviews__intro .capriccio-divider {
  margin-left: auto;
  margin-right: auto;
}

.capriccio-reviews__intro p:not(.capriccio-eyebrow) {
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
  color: #566272;
}

.capriccio-reviews__intro .capriccio-link {
  margin-top: 22px;
}

.capriccio-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.capriccio-review-card {
  background: var(--cap-surface);
  border: 1px solid var(--cap-border);
  padding: 28px 24px;
  box-shadow: var(--cap-shadow);
}

.capriccio-review-card__stars {
  color: #b78c4c;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.capriccio-review-card__text {
  color: #435160;
  font-size: 0.98rem;
  line-height: 1.75;
}

.capriccio-review-card__author {
  margin-top: 18px;
  color: var(--cap-muted);
  font-size: 0.9rem;
}

/* =========================================================
   9. HOME PAGE - GALLERY
========================================================= */

.capriccio-gallery {
  position: relative;
  width: min(100%, var(--cap-max));
  margin: 0 auto;
  padding: var(--cap-space-lg) 48px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: start;
}

.capriccio-gallery::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--cap-bg-alt);
  border-top: 1px solid var(--cap-border);
  z-index: -1;
}

.capriccio-gallery__intro {
  position: sticky;
  top: 32px;
}

.capriccio-gallery__intro h2 {
  max-width: 12ch;
}

.capriccio-gallery__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: center;
  margin-top: 30px;
}

.capriccio-gallery__actions .capriccio-link {
  margin-top: 0;
}

.capriccio-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.capriccio-gallery__grid img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e8e0d6;
}

/* Gallery CTA override */
.capriccio-gallery__actions .capriccio-btn--primary {
  background: transparent !important;
  color: #10273F !important;
  border: 1px solid rgba(16, 39, 63, 0.22) !important;
  box-shadow: none !important;
}

.capriccio-gallery__actions .capriccio-btn--primary:hover,
.capriccio-gallery__actions .capriccio-btn--primary:focus {
  background: #10273F !important;
  color: #fff !important;
  border-color: #10273F !important;
}



/* =========================================================
   10. HOME PAGE - RESERVE
========================================================= */

.capriccio-reserve {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--cap-border);
  border-bottom: 1px solid var(--cap-border);
  background: #f7f3ee;
  isolation: isolate;
}

.capriccio-reserve::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(rgba(247, 243, 238, 0.80), rgba(247, 243, 238, 0.80)),
    url("https://capriccio-naxos.com/wp-content/uploads/2026/05/DJI_20260519_141305_601-1-scaled-e1779222218820.jpeg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.capriccio-reserve__inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--cap-max));
  margin: 0 auto;
  padding: 54px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 32px;
  align-items: center;
}

.capriccio-reserve__text h2 {
  max-width: 10ch;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.capriccio-reserve__copy p {
  max-width: 34ch;
}

@media (max-width: 1024px) {
  .capriccio-reserve__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .capriccio-reserve::before {
    inset: -14px;
    filter: blur(1px);
  }

  .capriccio-reserve__inner {
    padding: 42px 20px;
  }
}

.capriccio-reserve__text h2 {
  max-width: 12ch;
  font-size: clamp(2rem, 3vw, 3.2rem);
}

.capriccio-reserve__copy p {
  max-width: 34ch;
}

/* =========================================================
   11. HOME PAGE - FOOTER
========================================================= */

.capriccio-footer {
  background: #f3eee7;
}

.capriccio-footer__top,
.capriccio-footer__bottom {
  width: min(100%, var(--cap-max));
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
}

.capriccio-footer__top {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 0.9fr 0.9fr;
  gap: 24px;
  align-items: center;
  padding-top: 42px;
  padding-bottom: 34px;
}

.capriccio-footer__brand img {
  max-width: 180px;
  width: 100%;
  height: auto;
}

.capriccio-footer__info p {
  font-size: 0.96rem;
  color: #566272;
}

.capriccio-footer__info p + p {
  margin-top: 4px;
}

.capriccio-footer__info a,
.capriccio-footer__bottom a {
  color: var(--cap-heading) !important;
}

.capriccio-footer__info a:hover,
.capriccio-footer__info a:focus-visible,
.capriccio-footer__bottom a:hover,
.capriccio-footer__bottom a:focus-visible {
  color: var(--cap-accent) !important;
}

.capriccio-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  padding-bottom: 22px;
  border-top: 1px solid #ddd3c7;
}

.capriccio-footer__bottom p {
  font-size: 0.85rem;
  color: #748091;
}

.capriccio-footer__bottom a {
  color: #748091;
}

.capriccio-footer__bottom a:hover,
.capriccio-footer__bottom a:focus-visible {
  color: var(--cap-accent);
}

/* =========================================================
   12. ACCESSIBILITY
========================================================= */

.capriccio-home a:focus-visible,
.capriccio-home button:focus-visible {
  outline: 2px solid var(--cap-accent);
  outline-offset: 3px;
}

/* =========================================================
   13. OUR STORY PAGE
========================================================= */

.capriccio-story-page {
  --cap-heading: #10273F;
  --cap-text: #4E5A67;
  --cap-border: rgba(16,39,63,.12);
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 16px 56px;
  color: var(--cap-text);
}

.capriccio-story-hero,
.capriccio-story-content__inner {
  max-width: 860px;
  margin: 0 auto;
}

.capriccio-story-hero {
  text-align: center;
  margin-bottom: 28px;
}

.capriccio-story-eyebrow {
  margin: 0 0 12px;
  color: var(--cap-heading);
  font: 600 12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.capriccio-story-hero h1 {
  margin: 0 0 14px;
  color: var(--cap-heading);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(38px,5vw,60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.capriccio-story-intro,
.capriccio-story-content__inner p {
  font-size: 18px;
  line-height: 1.75;
}

.capriccio-story-intro {
  margin: 0;
}

.capriccio-story-image {
  max-width: 1080px;
  margin: 0 auto 36px;
}

.capriccio-story-image__placeholder,
.capriccio-story-image__img {
  display: block;
  width: 100%;
  min-height: 260px;
  border: 1px solid var(--cap-border);
  border-radius: 16px;
}

.capriccio-story-image__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #F8F6F1;
  text-align: center;
}

.capriccio-story-image__placeholder span {
  color: var(--cap-heading);
  font: 500 13px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  text-transform: uppercase;
  opacity: .7;
}

.capriccio-story-image__img {
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.capriccio-story-content__inner p {
  margin: 0 0 24px;
}

.capriccio-story-content__inner strong {
  color: var(--cap-heading);
}

.capriccio-story-highlight {
  padding-left: 18px;
  border-left: 2px solid var(--cap-border);
  color: var(--cap-heading);
  font-family: Georgia,"Times New Roman",serif;
  font-size: 28px;
  line-height: 1.25;
}

/* =========================================================
   14. RESPONSIVE - GLOBAL / NAV
========================================================= */

@media (max-width: 1024px) {
  .main-navigation .main-nav ul li > a {
    font-size: 18px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 768px) {
  .site-main .wp-block-group__inner-container {
    padding: 15px;
  }

  .gp-icon svg {
    height: 2em;
    width: 2em;
    top: 0.125em;
    position: relative;
    fill: currentColor;
  }

.site-header .site-logo img,
.site-header .custom-logo {
  max-height: 68px !important;
  width: auto !important;
}

.inside-header {
  padding: 7px 18px;
}

  .main-navigation .main-nav ul li a {
    line-height: 50px;
  }
}

/* =========================================================
   15. RESPONSIVE - HOME
========================================================= */

@media (max-width: 1280px) {
  .capriccio-card {
    grid-template-columns: 1fr;
  }

  .capriccio-card__media {
    order: -1;
  }

  .capriccio-card__media img {
    min-height: 320px;
	aspect-ratio: 4 / 4;
  }

  .capriccio-gallery,
  .capriccio-reviews__inner {
    grid-template-columns: 1fr;
  }

  .capriccio-gallery__intro {
    position: static;
  }

  .capriccio-footer__top {
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
  }
}

@media (max-width: 1024px) {
  .capriccio-home {
    --cap-space: 72px;
    --cap-space-lg: 88px;
  }

  .capriccio-discover__grid,
  .capriccio-story__grid,
  .capriccio-reserve__inner,
  .capriccio-footer__top,
  .capriccio-reviews__grid {
    grid-template-columns: 1fr;
  }

  .capriccio-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .capriccio-story__content,
  .capriccio-card__content {
    padding: 48px 34px;
  }

  .capriccio-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .capriccio-home {
    font-size: 16px;
  }

  .capriccio-story__grid,
  .capriccio-gallery,
  .capriccio-reserve__inner,
  .capriccio-footer__top,
  .capriccio-footer__bottom,
  .capriccio-reviews__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  body:has(.capriccio-home) .menu-toggle,
  body:has(.capriccio-home) .mobile-menu-control-wrapper .menu-toggle {
    color: #ffffff !important;
    background: transparent !important;
  }

  body:has(.capriccio-home) .gp-icon svg {
    fill: #ffffff !important;
  }

  body:has(.capriccio-home) #site-navigation.toggled,
  body:has(.capriccio-home) #site-navigation.toggled .inside-navigation,
  body:has(.capriccio-home) #site-navigation.toggled .main-nav,
  body:has(.capriccio-home) #site-navigation.toggled .main-nav ul {
    background: #ffffff !important;
  }

  body:has(.capriccio-home) #site-navigation.toggled .main-nav ul li > a {
    color: #10273F !important;
    background: transparent !important;
    text-shadow: none !important;
  }

  body:has(.capriccio-home) #site-navigation.toggled .main-nav ul li.reservations-btn > a {
    background: #10273F !important;
    color: #ffffff !important;
    border-color: #10273F !important;
    text-shadow: none !important;
  }

  .capriccio-hero {
    background-position: center 50%;
  }

.capriccio-hero__overlay {
  background:
    linear-gradient(
      180deg,
      rgba(246, 242, 236, 0.68) 0%,
      rgba(246, 242, 236, 0.34) 92px,
      rgba(246, 242, 236, 0.00) 170px
    ),
    linear-gradient(
      180deg,
      rgba(20, 28, 38, 0.00) 0%,
      rgba(20, 28, 38, 0.08) 38%,
      rgba(20, 28, 38, 0.34) 72%,
      rgba(20, 28, 38, 0.56) 100%
    );
}

  .capriccio-hero__inner {
    padding: 0 24px;
    justify-content: flex-end;
  }

  .capriccio-hero__header-space {
    display: none;
  }

  .capriccio-hero__copy {
    width: 100%;
    max-width: none;
    margin-top: 0;
    padding-bottom: 60px;
  }

  .capriccio-hero .capriccio-eyebrow,
  .capriccio-hero__text,
  .capriccio-hero .capriccio-divider {
    display: none;
  }

  .capriccio-hero h1 {
    max-width: 6.7ch;
    font-size: clamp(2.35rem, 10vw, 3.45rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    color: #ffffff !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.30);
  }

  .capriccio-hero__actions,
  .capriccio-gallery__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .capriccio-hero__actions {
    margin-top: 18px;
    gap: 10px;
  }

  .capriccio-hero__actions .capriccio-btn {
    min-height: 48px;
    width: 100%;
    padding: 0 20px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
  }

  .capriccio-hero__actions .capriccio-btn--primary {
    background: #ffffff;
    border-color: #ffffff;
    color: #10273F !important;
  }

  .capriccio-hero__actions .capriccio-btn--secondary {
    display: none;
  }

  .capriccio-story__content p:not(.capriccio-eyebrow),
  .capriccio-card__content p:not(.capriccio-eyebrow),
  .capriccio-reserve__copy p,
  .capriccio-reviews__intro p:not(.capriccio-eyebrow) {
    max-width: 100%;
  }

  .capriccio-gallery__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .capriccio-card__content,
  .capriccio-story__content {
    padding: 36px 20px;
  }

  .capriccio-story__media img {
    min-height: 320px;
  }

  .capriccio-footer__brand img {
    max-width: 150px;
  }

  .capriccio-btn {
    width: 100%;
  }

  .capriccio-gallery__actions .capriccio-link {
    justify-content: flex-start;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .capriccio-hero__inner {
    padding: 0 24px 34px;
    justify-content: flex-end;
  }

  .capriccio-hero__header-space {
    display: none;
  }

  .capriccio-hero__copy {
    margin-top: 0;
    padding-bottom: 0;
  }

  .capriccio-hero .capriccio-eyebrow,
  .capriccio-hero__text,
  .capriccio-hero .capriccio-divider {
    display: none;
  }

  .capriccio-hero h1 {
    font-size: clamp(2.1rem, 8vw, 3.2rem);
    line-height: 0.95;
  }

  .capriccio-hero__actions .capriccio-btn--secondary {
    display: none;
  }
}