/* Phase 3G — canonical Greek site completion */













.va-greek-editorial-content { padding:clamp(68px,7vw,100px) clamp(24px,7vw,100px); background:#fff; }
.va-editor-note { margin:0; padding:18px 20px; border:1px dashed #9ad8ff; border-radius:12px; background:#eef6fa; color:#29424d; }

.va-role-hub-section { padding:0 clamp(24px,7vw,100px) clamp(72px,7.5vw,108px); background:#fff; }
.va-role-hub-section.is-tint { background:#eef6fa; }
.va-role-card-grid,
.va-entity-card-grid,
.va-useful-grid,
.va-trip-step-grid {
  width:min(1032px,100%); margin:40px auto 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:20px;
}
.va-role-card-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.va-role-card,
.va-entity-card,
.va-useful-grid > a,
.va-trip-step-grid > a {
  min-width:0; background:#fff; border-radius:14px; overflow:hidden; text-decoration:none; color:#29424d;
  box-shadow:0 8px 32px rgba(65,65,65,.07); transition:transform .2s ease, box-shadow .2s ease;
}
.va-role-card:hover,
.va-entity-card:hover,
.va-useful-grid > a:hover,
.va-trip-step-grid > a:hover { transform:translateY(-3px); box-shadow:0 12px 34px rgba(65,65,65,.11); }
.va-role-card-image,
.va-entity-card-image { aspect-ratio:4/3; background:linear-gradient(145deg,#d9f3ff,#9ad8ff); background-image:var(--va-role-image,var(--va-entity-image)); background-size:cover; background-position:center; }
.va-role-card-copy,
.va-entity-card-copy { padding:24px; }
.va-role-card h3,
.va-entity-card h3,
.va-useful-grid h3 { margin:0; color:#1a437c; font:800 clamp(21px,1.7vw,26px)/1.15 "Sofia Sans",sans-serif; }
.va-role-card p,
.va-entity-card p,
.va-useful-grid p { margin:12px 0 0; color:#29424d; font:500 16px/1.65 "Manrope",sans-serif; }

.va-route-hub-list { width:min(880px,100%); margin:40px auto 0; display:grid; gap:12px; }
.va-route-hub-list a { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 20px; background:#fff; border-radius:12px; text-decoration:none; box-shadow:0 6px 18px rgba(65,65,65,.05); }
.va-route-hub-list strong { color:#1a437c; font:700 17px/1.3 "Sofia Sans",sans-serif; }
.va-route-hub-list span { color:#607682; font:500 16px/1.4 "Manrope",sans-serif; text-align:right; }
.va-route-hub-list-full { width:min(1032px,100%); }
.va-hub-action { margin:32px auto 0; text-align:center; }

.va-gutenberg-page > .va-gutenberg-useful-grid { margin-top:32px; }
.va-useful-grid > a { padding:28px; }
.va-useful-grid h3,
.va-useful-grid > a > span { transition:color var(--va-motion-fast,160ms) ease; }
.va-useful-grid > a > span { display:block; margin-top:18px; color:#23a7fa; font:700 16px/1.2 "Manrope",sans-serif; }
.va-useful-grid > a:hover h3 { color:var(--va-blue); }
.va-useful-grid > a:hover > span { color:var(--va-dark-blue); }
.va-trip-step-grid > a { padding:30px; min-height:190px; display:flex; flex-direction:column; align-items:flex-start; }
.va-trip-step-grid > a > span { color:#23a7fa; font:800 16px/1 "Manrope",sans-serif; letter-spacing:.08em; }
.va-trip-step-grid h2 { margin:26px 0 auto; color:#1a437c; font:800 clamp(24px,2vw,30px)/1.15 "Sofia Sans",sans-serif; }
.va-trip-step-grid strong { margin-top:28px; color:#23a7fa; font:700 16px/1.2 "Manrope",sans-serif; }

.va-contact-directory { padding:clamp(68px,7vw,100px) clamp(24px,7vw,100px); background:#eef6fa; }
.va-contact-group { width:min(1032px,100%); margin:0 auto 56px; }
.va-contact-group:last-child { margin-bottom:0; }
.va-contact-group > h2 { margin:0 0 22px; color:#1a437c; font:800 clamp(28px,2.7vw,38px)/1.1 "Sofia Sans",sans-serif; }
.va-contact-directory-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:18px; }
.va-contact-directory-grid article { padding:24px; border-radius:12px; background:#fff; box-shadow:0 8px 24px rgba(65,65,65,.05); }
.va-contact-directory-grid h3 { margin:0 0 14px; color:#1a437c; font:800 20px/1.2 "Sofia Sans",sans-serif; }
.va-contact-directory-grid p,
.va-contact-directory-grid a { display:block; margin:8px 0 0; color:#29424d; font:500 16px/1.55 "Manrope",sans-serif; overflow-wrap:anywhere; }
.va-contact-directory-grid a { color:#0a78bd; text-decoration:none; }
.va-contact-note { color:#607682 !important; }

@media (max-width: 1000px) {
  .va-role-card-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {

  .va-role-hub-section { padding:0 20px 64px; }
.va-greek-editorial-content,
.va-contact-directory { padding:64px 20px; }
  .va-role-card-grid,
.va-entity-card-grid,
.va-useful-grid,
.va-trip-step-grid { grid-template-columns:1fr; margin-top:30px; }
  .va-gutenberg-page > .va-gutenberg-useful-grid { margin-top:24px; }
  .va-role-card-grid-four { grid-template-columns:1fr; }
  .va-route-hub-list a { align-items:flex-start; flex-direction:column; gap:8px; }
  .va-route-hub-list span { text-align:left; }
}
@media (max-width: 360px) {
  .va-role-hub-section,
.va-greek-editorial-content,
.va-contact-directory { padding-inline:16px; }
  .va-role-card-copy,
.va-entity-card-copy,
.va-useful-grid > a,
.va-trip-step-grid > a { padding:22px 20px; }
}


/* 0.1.9 — TranslatePress integration */





















/* Phase 3J.1 — desktop collapsible sidebar + full-height homepage video hero */


@media (min-width:1200px) {









  .va-home-hero {
    height:100svh;
    min-height:720px;
  }
  .va-home-hero .va-hero-content {
    min-height:100%;
    padding-top:clamp(64px, 8vh, 96px);
    padding-bottom:260px;
  }
  .va-home-hero .va-info-strip { bottom:clamp(36px, 7vh, 90px); }
}

.va-home-hero { overflow:hidden; isolation:isolate; }
.va-home-hero-video {
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.va-home-hero .va-hero-overlay {
  position:absolute;
  z-index:1;
  inset:0;
  background:linear-gradient(90deg,rgba(0,25,45,.34),rgba(0,25,45,.04) 68%);
  pointer-events:none;
}
.va-home-hero.has-video::after { z-index:1; }
.va-home-hero .va-hero-content,
.va-home-hero .va-info-strip { position:relative; z-index:2; }
.va-home-hero .va-hero-content { justify-content:center; text-align:center; }
.va-home-hero .va-hero-content h1 { margin-inline:auto; }
.va-home-hero .va-info-strip { position:absolute; }

@media (max-width:1199px) {

  .va-home-hero { min-height:100svh; }
}

@media (max-width:767px) {
  .va-home-hero { min-height:max(100svh, 640px); }
  .va-home-hero .va-hero-content { min-height:100%; padding-bottom:220px; }
  .va-home-hero .va-info-strip { bottom:18px; }
}

@media (max-width:360px) {
  .va-home-hero { min-height:max(100svh, 620px); }
  .va-home-hero .va-hero-content { padding-bottom:210px; }
}



@media (prefers-reduced-motion: reduce) {
  .va-home-hero-video { display:none; }
}

/* Phase 3J.1 — homepage Figma editorial copy */
.va-place-card h3 { margin-top:auto; margin-bottom:10px; }
.va-place-description {
  margin:0 0 12px;
  color:inherit;
  font:500 16px/28px "Manrope",sans-serif;
  letter-spacing:-.28px;
}

/* Phase 3J.2 — approved Figma photography on designed destination pages */
.va-detail-figma-break {
  width: 100%;
  aspect-ratio: 29 / 10;
  margin: 0;
  overflow: hidden;
  background: #d7eaf1;
}
.va-detail-figma-break img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 767px) {
  .va-detail-figma-break { aspect-ratio: 4 / 3; }
}

/* Phase 3J.4 — Figma photography: Museums, Underwater Museum, Marine Park */
.va-figma-feature-list { background:#fff; }
.va-figma-photo-story { padding:clamp(72px,8vw,110px) clamp(24px,6.5vw,90px); background:#fff; }
.va-photo-story-grid { width:min(980px,100%); margin:0 auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.va-figma-photo-card { margin:0; min-height:0; aspect-ratio:4/3; overflow:hidden; border-radius:var(--va-radius); background:#d8edf4; box-shadow:0 8px 40px rgba(65,65,65,.05); }
.va-figma-photo-card.is-large { grid-row:span 2; aspect-ratio:auto; min-height:100%; }
.va-figma-photo-card img,
.va-figma-wide-photo img { width:100%; height:100%; display:block; object-fit:cover; }
.va-figma-wide-photo { width:100%; height:clamp(360px,48vw,560px); margin:0; overflow:hidden; background:#d8edf4; }
@media (max-width:767px) {
  .va-figma-photo-story { padding:64px 20px; }
  .va-photo-story-grid { grid-template-columns:1fr; gap:16px; }
  .va-figma-photo-card,
.va-figma-photo-card.is-large { aspect-ratio:4/3; min-height:0; grid-row:auto; }
  .va-figma-wide-photo { height:auto; aspect-ratio:4/3; }
}
@media (max-width:360px) { .va-figma-photo-story { padding-left:16px; padding-right:16px; } }

/* Homepage "Βρείτε τη δική σας ιδανική απόδραση" horizontal carousel. */
.va-place-head-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}
.va-place-head-row .va-section-head {
  margin-bottom: 0;
}
.va-place-carousel-controls {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
  padding-bottom: 2px;
}
.va-place-carousel-arrow {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(35,167,250,.22);
  border-radius: 999px;
  background: #fff;
  color: var(--va-blue);
  box-shadow: 0 2px 8px rgba(35,167,250,.15);
  font: 600 22px/1 "Manrope", sans-serif;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
}
.va-place-carousel-arrow:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--va-blue);
  color: #fff;
}
.va-place-carousel-arrow:disabled {
  opacity: .34;
  cursor: default;
}
.va-place-scroller {
  display: flex;
  grid-template-columns: none;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 0;
  margin: 0;
}
.va-place-scroller::-webkit-scrollbar {
  display: none;
}
.va-place-scroller .va-place-card {
  flex: 0 0 calc((100% - 34px) / 3.15);
  width: auto;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
@media (max-width: 1080px) {
  .va-place-scroller .va-place-card {
    flex-basis: calc((100% - 19px) / 2.2);
  }
}
@media (max-width: 820px) {
  .va-place-head-row {
    align-items: flex-start;
  }
  .va-place-scroller .va-place-card {
    flex-basis: calc((100% - 3px) / 1.18);
  }
}
@media (max-width: 560px) {
  .va-place-head-row {
    display: block;
    margin-bottom: 24px;
  }
  .va-place-carousel-controls {
    margin-top: 22px;
  }
  .va-place-scroller .va-place-card {
    flex-basis: calc((100% - 2px) / 1.12);
    padding: 26px 22px 20px;
  }
}

/* ==========================================================
   Visit Alonissos — Interaction & motion polish
   ========================================================== */

:root {
  --va-motion-fast: 160ms;
  --va-motion-medium: 260ms;
  --va-motion-slow: 520ms;
  --va-motion-ease: cubic-bezier(.22, .61, .36, 1);
  --va-motion-spring: cubic-bezier(.2, .8, .2, 1);
  --va-hover-shadow: 0 18px 42px rgba(26, 67, 124, .14);
  --va-hover-shadow-soft: 0 12px 30px rgba(26, 67, 124, .10);
}

html {
  scroll-behavior: smooth;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(35, 167, 250, .38);
  outline-offset: 3px;
}

/* Carousel controls: always visually obvious. */
.va-place-carousel-arrow {
  background: var(--va-blue);
  color: #fff;
  border-color: var(--va-blue);
  box-shadow:
    0 8px 22px rgba(35, 167, 250, .28),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  transition:
    transform var(--va-motion-fast) var(--va-motion-spring),
    background-color var(--va-motion-fast) ease,
    border-color var(--va-motion-fast) ease,
    box-shadow var(--va-motion-fast) ease,
    opacity var(--va-motion-fast) ease;
}
.va-place-carousel-arrow:hover:not(:disabled) {
  background: #168fdc;
  border-color: #168fdc;
  color: #fff;
  transform: translateY(-2px) scale(1.06);
  box-shadow:
    0 12px 28px rgba(35, 167, 250, .36),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.va-place-carousel-arrow:active:not(:disabled) {
  transform: translateY(0) scale(.95);
}
.va-place-carousel-arrow:disabled {
  background: rgba(35, 167, 250, .35);
  border-color: transparent;
  color: rgba(255, 255, 255, .88);
  opacity: .75;
}

/* Main CTA / pill buttons. */
.va-button {
  transition:
    transform var(--va-motion-fast) var(--va-motion-spring),
    box-shadow var(--va-motion-fast) ease,
    background-color var(--va-motion-fast) ease,
    color var(--va-motion-fast) ease,
    border-color var(--va-motion-fast) ease;
}
.va-button {
  position: relative;
  overflow: hidden;
}
.va-button::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -40%;
  width: 35%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: rotate(18deg) translateX(-240%);
  transition: transform 560ms var(--va-motion-ease);
  pointer-events: none;
}
.va-button:hover::after {
  transform: rotate(18deg) translateX(520%);
}
.va-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(35,167,250,.30);
}
.va-button:active {
  transform: translateY(-1px) scale(.98);
}

/* Sidebar / navigation. */
























/* Reusable card hover language. */
.va-place-card,
.va-role-card,
.va-entity-card,
.va-related-card,
.va-beach-card,
.va-listing-card,
.va-visitor-card,
.va-trip-step-grid > a,
.va-useful-grid > a,
.va-contact-card,
.va-info-card,
.va-experience-card {
  transition:
    transform var(--va-motion-medium) var(--va-motion-spring),
    box-shadow var(--va-motion-medium) ease,
    filter var(--va-motion-medium) ease;
  will-change: transform;
}
.va-place-card:hover,
.va-role-card:hover,
.va-entity-card:hover,
.va-related-card:hover,
.va-beach-card:hover,
.va-listing-card:hover,
.va-visitor-card:hover,
.va-trip-step-grid > a:hover,
.va-useful-grid > a:hover,
.va-contact-card:hover,
.va-info-card:hover,
.va-experience-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--va-hover-shadow);
  filter: saturate(1.035);
}
.va-place-card:active,
.va-role-card:active,
.va-entity-card:active,
.va-related-card:active,
.va-beach-card:active,
.va-listing-card:active,
.va-visitor-card:active,
.va-trip-step-grid > a:active,
.va-useful-grid > a:active,
.va-contact-card:active,
.va-info-card:active,
.va-experience-card:active {
  transform: translateY(-2px) scale(.992);
}

/* Square homepage carousel cards get a little more depth. */
.va-place-scroller .va-place-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.va-place-scroller .va-place-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.16), transparent 48%, rgba(0,0,0,.05));
  opacity: 0;
  transition: opacity var(--va-motion-medium) ease;
  pointer-events: none;
  z-index: -1;
}
.va-place-scroller .va-place-card:hover {
  transform: translateY(-7px) scale(1.012);
}
.va-place-scroller .va-place-card:hover::before {
  opacity: 1;
}
.va-place-card h3,
.va-place-card p,
.va-place-card a {
  transition: transform var(--va-motion-medium) var(--va-motion-spring), opacity var(--va-motion-medium) ease;
}
.va-place-card:hover h3 {
  transform: translateY(-2px);
}

/* Image zoom where the markup uses an actual image element. */
.va-feature-row-media,
.va-figma-photo-card,
.va-figma-wide-photo,
.va-gallery-slide,
.va-home-experience-media,
.va-intro-media,
.va-marine-media {
  overflow: hidden;
}
.va-feature-row-media img,
.va-figma-photo-card img,
.va-figma-wide-photo img,
.va-gallery-slide img,
.va-home-experience-media img,
.va-intro-media img,
.va-marine-media img {
  transition:
    transform 700ms var(--va-motion-ease),
    filter 500ms ease;
}
.va-feature-row:hover .va-feature-row-media img,
.va-figma-photo-card:hover img,
.va-figma-wide-photo:hover img,
.va-gallery-slide:hover img,
.va-home-experience-card:hover .va-home-experience-media img,
.va-intro:hover .va-intro-media img,
.va-marine:hover .va-marine-media img {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.015);
}

/* Background-image cards cannot zoom their image independently, so move the card/media layer slightly. */
.va-role-card-image,
.va-entity-card-image,
.va-related-card-image,
.va-beach-card-image,
.va-listing-card-image {
  transition:
    transform 650ms var(--va-motion-ease),
    filter 450ms ease;
  transform-origin: center;
}
.va-role-card:hover .va-role-card-image,
.va-entity-card:hover .va-entity-card-image,
.va-related-card:hover .va-related-card-image,
.va-beach-card:hover .va-beach-card-image,
.va-listing-card:hover .va-listing-card-image {
  transform: scale(1.025);
  filter: saturate(1.04);
}

/* Footer and inline text links. */
.va-footer a,
.va-source-list a,
.va-prose a,
.va-detail-article a {
  transition:
    color var(--va-motion-fast) ease,
    opacity var(--va-motion-fast) ease,
    transform var(--va-motion-fast) var(--va-motion-spring);
}
.va-footer a:hover {
  color: #fff;
  transform: translateX(3px);
}
.va-footer-bottom a:hover {
  transform: translateY(-1px);
}
.va-source-list a:hover,
.va-prose a:hover,
.va-detail-article a:hover {
  color: var(--va-blue);
}

/* Hero motion is subtle: no distracting parallax. */
.va-home-hero-content,
.va-editorial-hero-copy,
.va-page-hero-copy {
  animation: vaHeroIn 760ms var(--va-motion-ease) both;
}
@keyframes vaHeroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Viewport reveal pass.
   JavaScript only adds .va-reveal to components when IntersectionObserver exists. */
.va-motion-ready .va-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--va-motion-slow) var(--va-motion-ease),
    transform var(--va-motion-slow) var(--va-motion-ease);
  transition-delay: var(--va-reveal-delay, 0ms);
}
.va-motion-ready .va-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Give nested card groups a natural stagger without making pages feel slow. */
.va-motion-ready .va-reveal-group > :nth-child(1) { --va-reveal-delay: 0ms; }
.va-motion-ready .va-reveal-group > :nth-child(2) { --va-reveal-delay: 55ms; }
.va-motion-ready .va-reveal-group > :nth-child(3) { --va-reveal-delay: 110ms; }
.va-motion-ready .va-reveal-group > :nth-child(4) { --va-reveal-delay: 165ms; }
.va-motion-ready .va-reveal-group > :nth-child(5) { --va-reveal-delay: 220ms; }
.va-motion-ready .va-reveal-group > :nth-child(6) { --va-reveal-delay: 275ms; }

/* Press feedback for every obvious interactive control. */
.va-footer a:active {
  opacity: .72;
}

/* Avoid motion sickness and honor OS accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .va-home-hero-content,
.va-editorial-hero-copy,
.va-page-hero-copy {
    animation: none !important;
  }

  .va-motion-ready .va-reveal,
.va-motion-ready .va-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .va-button::after {
    display: none;
  }

  .va-feature-row-media img,
.va-figma-photo-card img,
.va-figma-wide-photo img,
.va-gallery-slide img,
.va-home-experience-media img,
.va-intro-media img,
.va-marine-media img,
.va-role-card-image,
.va-entity-card-image,
.va-related-card-image,
.va-beach-card-image,
.va-listing-card-image {
    transform: none !important;
    transition: none !important;
  }
}

/* 0.1.21 — keep section-header CTA buttons as proper horizontal pills. */
.va-head-with-action > .va-button {
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  max-width: none;
  white-space: nowrap;
  line-height: 1.2;
  align-self: flex-end;
}

@media (max-width: 900px) {
  .va-head-with-action > .va-button {
    align-self: flex-start;
    width: auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 360px) {
  .va-head-with-action > .va-button {
    width: 100%;
  }
}



/* 0.1.22 — Accommodation copy/layout aligned with approved Figma frame 14:4738. */
.va-accommodation-bullets {
  display: grid;
  gap: 16px;
  margin-top: 2px;
}
.va-accommodation-bullets li {
  padding-left: 20px;
  position: relative;
  line-height: 1.6;
}
.va-accommodation-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--va-blue);
  font-weight: 800;
}
.va-accommodation-bullets strong {
  color: var(--va-deep-blue);
}
.va-accommodation-info-grid .va-stat-card {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  min-height: 170px;
}
.va-accommodation-info-kicker {
  display: block;
  color: var(--va-deep-blue);
  font-family: "Sofia Sans", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.25;
}
.va-accommodation-info-grid .va-stat-card p {
  margin: 8px 0 0;
  color: var(--va-body);
  font-size: 16px;
  line-height: 1.6;
}
.va-accommodation-booking-tip {
  margin-top: 40px;
  padding: 32px;
  border: 1px solid rgba(35, 167, 250, .34);
  border-radius: 12px;
  background: #d9f3ff;
}
.va-accommodation-booking-tip h3 {
  margin: 0 0 10px;
  color: var(--va-deep-blue);
  font-family: "Sofia Sans", sans-serif;
  font-size: 20px;
}
.va-accommodation-booking-tip p {
  margin: 0;
  color: var(--va-body);
  line-height: 1.7;
}
@media (max-width: 820px) {
  .va-accommodation-info-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .va-accommodation-info-grid {
    grid-template-columns: 1fr;
  }
  .va-accommodation-booking-tip {
    padding: 24px;
  }
}