:root {
      --bg: #ffffff;
      --bg-soft: #f7f7fb;
      --text-main: #222222;
      --text-muted: #7b7b87;
      --border-subtle: #e6e6f0;
      --accent-soft: #e2e8ff;
      --accent-soft-deep: #c7d2ff;
      --radius-lg: 18px;
      --radius-full: 999px;
      --shadow-soft: 0 18px 45px rgba(15, 23, 42, 0.08);
      --max-width: 960px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text-main);
      -webkit-font-smoothing: antialiased;
    }

    img {
      max-width: 100%;
      /* Required now that every <img> carries width/height attributes. Without
         it the browser uses the height attribute as the rendered height while
         max-width shrinks the width, so images stretch vertically on any
         viewport narrower than the image. The attributes still do their job of
         reserving correct space and preventing layout shift.
         Rules that deliberately set height (.destination-card-image img,
         .region-post-image img, both with object-fit: cover) have higher
         specificity and are unaffected. */
      height: auto;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .skip-link {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: -40px;
      padding: 0.5rem 1rem;
      background: #111827;
      color: #f9fafb;
      border-radius: var(--radius-full);
      font-size: 0.875rem;
      z-index: 1000;
    }

    .skip-link:focus {
      top: 12px;
    }

    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .section {
      padding: 4.5rem 0;
    }

    .section--soft {
      background: var(--bg-soft);
    }

    .section-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }

    .section-header h2 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.8rem;
      letter-spacing: 0.03em;
      margin: 0 0 0.6rem;
    }

    .section-header p {
      margin: 0;
      color: var(--text-muted);
      font-size: 0.95rem;
    }

    /* HEADER & NAV */

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(16px);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    }

    .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo on the left, nav on the right */
  padding: 0.9rem 1.5rem;
  gap: 1rem;
}

/* Allow the logo text to wrap if needed */
.logo {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;   /* or center if you prefer, but left reads cleaner here */
  white-space: normal; /* allow wrap instead of forcing one long line */
}

/* Make sure the link inside the logo doesn’t look like a default link */
.logo a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

    .logo span {
      font-size: 0.75rem;
      display: block;
      color: var(--text-muted);
      letter-spacing: 0.16em;
      margin-top: 0.2rem;
    }

    .site-nav {
      display: flex;
      gap: 1.25rem;
      font-size: 0.9rem;
      color: var(--text-muted);
    }

    .site-nav a {
      position: relative;
      padding-bottom: 0.25rem;
    }

    .site-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: #111827;
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.2s ease;
      opacity: 0.6;
    }

    .site-nav a:hover::after,
    .site-nav a:focus-visible::after {
      transform: scaleX(1);
    }

    .nav-toggle {
      display: none;
    }

    .nav-toggle-label {
      display: none;
      cursor: pointer;
      padding: 0.35rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--border-subtle);
      align-items: center;
      justify-content: center;
    }

    .nav-toggle-label span {
      display: block;
      width: 18px;
      height: 2px;
      background: #111827;
      border-radius: 10px;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .nav-toggle-label span + span {
      margin-top: 4px;
    }

    /* HERO */

    .hero {
      padding: 3.5rem 0 3rem;
    }

    .hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr);
      gap: 2.75rem;
      align-items: center;
    }

    .hero-kicker {
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 0.18em;
      color: var(--text-muted);
      margin-bottom: 0.7rem;
    }

    .hero h1 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: clamp(2.15rem, 3vw, 2.8rem);
      line-height: 1.18;
      margin: 0 0 0.9rem;
    }

    .hero-subtitle {
      font-size: 0.98rem;
      color: var(--text-muted);
      max-width: 28rem;
      margin: 0 0 1.6rem;
    }

    .hero-scroll {
      font-size: 0.9rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .hero-scroll::after {
      content: "";
      width: 30px;
      height: 1px;
      background: var(--border-subtle);
    }

    .hero-image {
      border-radius: 28px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      background: #e5e7eb;
      position: relative;
    }

    .hero-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hero-image-caption {
      position: absolute;
      bottom: 1.2rem;
      left: 1.4rem;
      padding: 0.4rem 0.7rem;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.75rem;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* FEATURED CARDS */

    .featured-list {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .feature-card {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
      gap: 1.75rem;
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding: 1.4rem;
      align-items: center;
    }

    .feature-media {
      border-radius: 22px;
      overflow: hidden;
      background: #e5e7eb;
    }

    .feature-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .feature-body {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .rank-label {
      align-self: flex-start;
      padding: 0.2rem 0.75rem;
      border-radius: 999px;
      border: 1px solid var(--accent-soft-deep);
      background: var(--accent-soft);
      font-size: 0.75rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #111827;
    }

    .feature-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.25rem;
      margin: 0;
    }

    .feature-location {
      font-size: 0.9rem;
      color: var(--text-muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .feature-description {
      font-size: 0.95rem;
      color: var(--text-main);
      line-height: 1.6;
      margin: 0.4rem 0 0.8rem;
    }

    .feature-link {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      align-self: flex-start;
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #111827;
    }

    .feature-link:hover,
    .feature-link:focus-visible {
      opacity: 0.8;
    }

    /* LATEST POST */

    .latest-inner {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .latest-card {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
      gap: 1.6rem;
      background: #ffffff;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-soft);
      padding: 1.4rem;
      align-items: center;
    }

    .latest-media {
      border-radius: 20px;
      overflow: hidden;
      background: #e5e7eb;
    }

    .latest-meta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      font-size: 0.8rem;
      color: var(--text-muted);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 0.7rem;
    }

    .latest-location {
      padding: 0.14rem 0.7rem;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: #f9fafb;
    }

    .latest-date {
      padding: 0.14rem 0;
    }

    .latest-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.25rem;
      margin: 0 0 0.6rem;
    }

    .latest-preview {
      font-size: 0.95rem;
      color: var(--text-main);
      line-height: 1.6;
      margin: 0 0 0.9rem;
    }

    .latest-link {
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.18em;
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #111827;
      display: inline-block;
    }

    .latest-link:hover,
    .latest-link:focus-visible {
      opacity: 0.85;
    }

    /* DESTINATION GRID */

    .dest-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.4rem;
    }

    .dest-card {
      display: flex;
      flex-direction: column;
      border-radius: 18px;
      background: #ffffff;
      border: 1px solid var(--border-subtle);
      overflow: hidden;
      text-decoration: none;
      box-shadow: 0 16px 30px rgba(15, 23, 42, 0.04);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .dest-card:hover,
    .dest-card:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0 22px 40px rgba(15, 23, 42, 0.08);
      border-color: var(--accent-soft-deep);
    }

    .dest-image {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #e5e7eb;
    }

    .dest-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .dest-body {
      padding: 0.9rem 1rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
    }

    .dest-title {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1rem;
    }

    .dest-link-label {
      font-size: 0.8rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-muted);
    }

    /* ABOUT */

    .about-inner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 2.2rem;
      align-items: center;
    }

    .about-photo {
      display: flex;
      justify-content: center;
    }

    .about-photo-inner {
      width: 120px;
      height: 120px;
      border-radius: 999px;
      padding: 4px;
      background: radial-gradient(circle at top left, #e5edff, #f3f4f6);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .about-photo-inner img {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      object-fit: cover;
    }

    .about-text h2 {
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1.6rem;
      margin: 0 0 0.8rem;
    }

    .about-text p {
      margin: 0 0 0.8rem;
      font-size: 0.96rem;
      line-height: 1.7;
      color: var(--text-main);
    }

    .about-text p:last-child {
      margin-bottom: 0;
    }

    /* FOOTER */

    .site-footer {
      border-top: 1px solid var(--border-subtle);
      padding: 2.4rem 0 2rem;
      background: #ffffff;
    }

    .footer-inner {
      display: flex;
      flex-wrap: wrap;
      gap: 1.75rem;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.85rem;
      color: var(--text-muted);
    }

    .footer-left {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    .social-list {
      display: flex;
      gap: 0.75rem;
      align-items: center;
    }

    .social-label {
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.16em;
    }

    .social-icon {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f9fafb;
      transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    }

    .social-icon:hover,
    .social-icon:focus-visible {
      background: #ffffff;
      box-shadow: var(--shadow-soft);
      transform: translateY(-1px);
    }

    .social-icon svg {
      width: 16px;
      height: 16px;
    }

    .sustainability-block {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 0.6rem 0.8rem;
      align-items: center;
      padding: 0.65rem 0.9rem;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid var(--border-subtle);
      max-width: 360px;
    }

    .sustainability-badge {
      padding: 0.1rem 0.7rem;
      border-radius: 999px;
      border: 1px solid #bbf7d0;
      background: #dcfce7;
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: #166534;
      white-space: nowrap;
    }

    .sustainability-text {
      font-size: 0.8rem;
      color: var(--text-muted);
      margin: 0;
      line-height: 1.5;
    }

    .footer-right {
      display: flex;
      flex-direction: column;
      gap: 0.9rem;
      align-items: flex-end;
    }

    .back-to-top {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.4rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--border-subtle);
      background: #f9fafb;
      font-size: 0.8rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      text-decoration: none;
    }

    .back-to-top:hover,
    .back-to-top:focus-visible {
      background: #ffffff;
      box-shadow: var(--shadow-soft);
    }

    .copyright {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-muted);
      text-align: right;
    }

    /* RESPONSIVE */

    @media (max-width: 960px) {
      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero-image {
        order: -1;
      }

      .feature-card,
      .latest-card {
        grid-template-columns: 1fr;
      }

      .about-inner {
        grid-template-columns: 1fr;
      }

      .footer-inner {
        align-items: stretch;
      }

      .footer-right {
        align-items: flex-start;
      }
    }

    @media (max-width: 768px) {
      .header-inner {
        justify-content: space-between;
      }

      .site-nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
        flex-direction: column;
        padding: 0.8rem 1.5rem 1rem;
        gap: 0.5rem;
        transform-origin: top;
        transform: scaleY(0.7);
        opacity: 0;
        pointer-events: none;
        transition: transform 0.18s ease, opacity 0.18s ease;
      }

      .nav-toggle-label {
        display: inline-flex;
      }

      .nav-toggle:checked ~ .site-nav {
        opacity: 1;
        pointer-events: auto;
        transform: scaleY(1);
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
        transform: translateY(3px) rotate(45deg);
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
        opacity: 0;
      }

      .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
        transform: translateY(-3px) rotate(-45deg);
      }

      .section {
        padding: 3.2rem 0;
      }

      .hero {
        padding-top: 2.4rem;
      }
    }

    @media (max-width: 480px) {
      .hero h1 {
        font-size: 2rem;
      }

      .feature-card,
      .latest-card {
        padding: 1.1rem;
      }

      .hero-image {
        border-radius: 22px;
      }
    }

    /* -------------------------------------------------------
   TRAVEL INDEX PAGE – EXTRA STYLES
   (These classes are new and won't override existing ones.)
--------------------------------------------------------*/

/* Page title on the travel index */
.page-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.75rem;
}

/* Short line of intro text under the title */
.page-intro-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 30rem;
}

/* Regions section – keeps everything vertically stacked and clean */
.index-regions .container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Each region block (Europe, Americas) */
.region-block {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Region headings – simple and consistent with overall typography */
.region-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  margin: 0;
}

/* Basic list for region destinations */
.region-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each list item just adds a little vertical spacing */
.region-list li + li {
  margin-top: 0.35rem;
}

/* Destination links: minimal, no borders or special decoration */
.region-list a {
  font-size: 0.96rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Remove underline on hover but don't add fancy effects */
.region-list a:hover,
.region-list a:focus-visible {
  text-decoration: none;
}

/* Latest posts section subtitle */
.section-subtitle {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.4rem;
  margin: 0 0 1.4rem;
}

/* Wrapper for the vertical feed of posts */
.post-feed {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* Single post card: full-width clickable block */
.post-card {
  display: block;
  text-decoration: none;
}

/* Thumbnail at the top of each post card */
.post-thumb {
  width: 100%;
  margin-bottom: 0.8rem;
}

/* Images: no overlays, just clean rectangular photos */
.post-thumb img {
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Text content of the post card */
.post-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Post title */
.post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

/* Region and country line */
.post-meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Date line */
.post-date {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Keep hover state understated: tiny opacity shift only */
.post-card:hover .post-title,
.post-card:focus-visible .post-title {
  opacity: 0.9;
}


/* -------------------------------------------------------
   HOME – CTA STRIP (links to blogs / hotel reviews)
--------------------------------------------------------*/

.home-cta-section {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: #ffffff; /* keep it clean; change to var(--bg-soft) if you want a soft block */
}

.home-cta-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.home-cta-text {
  max-width: 460px;
}

.home-cta-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.home-cta-title {
  margin: 0 0 0.4rem;
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.35rem;
}

.home-cta-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Buttons */
.home-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.4rem;
  border-radius: 999px;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--border-subtle);
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

/* Primary = dark pill */
.home-cta-button--primary {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

/* Secondary = light outline */
.home-cta-button--secondary {
  background: #ffffff;
  color: var(--text-main);
}

.home-cta-button:hover,
.home-cta-button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .home-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Footer – minimal variant for the index page */


/* Footer inner layout: left side links, right side credit */
.footer-minimal-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Footer text links */
.footer-minimal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

/* Individual footer links – plain and simple */
.footer-link {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.footer-link:hover,
.footer-link:focus-visible {
  text-decoration: none;
}

/* "Cookie settings" is a <button> (it performs an action, it does not navigate)
   but should read as just another footer link. */
.footer-link-button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 0.85rem;
  color: inherit;
  cursor: pointer;
}

/* Credit line on the right */
.footer-minimal-credit {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Slight adjustments on smaller screens to keep everything tidy */
@media (max-width: 640px) {
  .page-title {
    font-size: 1.6rem;
  }

  .footer-minimal-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* -------------------------------------------------------
   BLOG INDEX PAGE – EXTRA STYLES
   (New classes only; existing styles stay untouched.)
--------------------------------------------------------*/

/* -------------------------------------------------------
   BLOG – RELATED POSTS SECTION
--------------------------------------------------------*/

.blog-related-section {
  border-top: 1px solid var(--border-subtle);
}

.blog-related-inner {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.blog-related-header {
  text-align: left;
}

.blog-related-intro {
  margin: 0.25rem 0 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Cards list */
.blog-related-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Single card */
.blog-related-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: flex-start;
}

/* Image wrapper – square, consistent thumbnails */
.blog-related-image-link {
  display: block;
  flex-shrink: 0;
}

.blog-related-image {
  margin: 0;
  width: 120px;           /* adjust size if you want bigger/smaller */
  aspect-ratio: 1 / 1;    /* ✅ square */
  border-radius: 18px;
  overflow: hidden;
  background: #e5e7eb;
}

.blog-related-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;       /* centre + crop portrait/landscape */
}

/* Text area */
.blog-related-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.blog-related-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1rem;
  margin: 0;
}

.blog-related-title a {
  text-decoration: none;
  color: var(--text-main);
}

.blog-related-title a:hover,
.blog-related-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.blog-related-meta {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-related-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* Responsive tweak */
@media (max-width: 640px) {
  .blog-related-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .blog-related-image {
    width: 100%;
    max-width: 260px;
  }
}

/* -------------------------------------------------------
   BLOG LISTS (inline checklists / itemised details)
--------------------------------------------------------*/

.blog-list {
  margin: 1rem 0 1.6rem;          /* breathing room above + below */
  padding-left: 0;                /* remove default UL indent */
  list-style: none;               /* no browser bullets */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;                   /* consistent spacing between items */
}

.blog-list li {
  position: relative;
  padding-left: 1.2rem;           /* space for a custom bullet */
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Soft custom bullet */
.blog-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border-subtle);
}

/* Label part (your <strong> bits) */
.blog-list li strong {
  font-weight: 600;
  margin-right: 0.25rem;
}

/* Top section containing the back button */
.blog-index-top .container {
  display: flex;
  justify-content: flex-start;
}

/* Simple back button – rounded, no shadows, minimal styling */
.blog-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}

/* Keep hover state very understated */
.blog-back-link:hover,
.blog-back-link:focus-visible {
  text-decoration: none;
}

/* -------------------------------------------------------
   BLOG INDEX – FILTERS & SEARCH
--------------------------------------------------------*/

.blog-index-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.3rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.6rem;
}

.blog-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blog-filter-btn {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: #ffffff;
  color: var(--text-main);
  cursor: pointer;
}

.blog-filter-btn.is-active {
  background: #111827;
  color: #ffffff;
  border-color: #111827;
}

.blog-filter-btn:hover,
.blog-filter-btn:focus-visible {
  box-shadow: var(--shadow-soft);
}

/* Search */
.blog-search-wrap {
  min-width: 190px;
}

.blog-search-input {
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
}

/* Accessibility helper */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 640px) {
  .blog-index-controls {
    align-items: flex-start;
  }

  .blog-search-wrap {
    width: 100%;
  }
}
/* Intro section: center title + filter link vertically */
.blog-index-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4rem;
}

/* Section title “Personal Blogs” */
.blog-section-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

/* Wide “Hotel Reviews” button link */
.blog-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Grid wrapper for blog cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
}

/* Individual blog card: clickable, no shadows */
.blog-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}


.blog-card-thumb {
  width: 100%;
  /* choose the ratio you like:
     4 / 3 = a bit taller, 16 / 9 = more cinematic */
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: #e5e7eb;         /* soft grey fallback if image fails */
  margin-bottom: 0.85rem;      /* breathing room before text */
}

.blog-card-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;           /* crop portrait/landscape nicely */
}

/* Text area inside the card */
.blog-card-body {
  padding: 1rem 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Blog post title */
.blog-card-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

/* Metadata line: category + date */
.blog-card-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* One-sentence preview paragraph */
.blog-card-preview {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Keep hover state calm: tiny opacity change on title only */
.blog-card:hover .blog-card-title,
.blog-card:focus-visible .blog-card-title {
  opacity: 0.9;
}

/* Pagination container – centered layout */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.9rem;
}

/* Pagination buttons: simple, rounded, no shadows */
.pagination-button {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: transparent;
  font: inherit;
}

/* Disabled pagination buttons look softer */
.pagination-button[disabled] {
  opacity: 0.45;
  cursor: default;
}

/* Center pagination label */
.pagination-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Small responsive tweaks */
@media (max-width: 640px) {
  .blog-section-title {
    font-size: 1.6rem;
    letter-spacing: 0.14em;
  }

  .blog-card-body {
    padding: 0.9rem 0.9rem 1.1rem;
  }
}


/* -------------------------------------------------------
   CONTACT PAGE – EXTRA STYLES
   (New classes only; existing styles remain unchanged.)
--------------------------------------------------------*/

/* Intro section layout */
.contact-intro-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Contact title */
.contact-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Lead paragraph under title */
.contact-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Small note about what not to send */
.contact-note {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Layout for contact content: panel + form */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 2.5rem;
  align-items: flex-start;
}

/* Left-side information panel */
.contact-panel {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Panel heading */
.contact-panel-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.25rem;
  margin: 0;
}

/* List of details in the left panel */
.contact-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Label + value pair */
.contact-detail-label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 0.1rem;
}

.contact-detail-value {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Right-side form section */
.contact-form-section {
  width: 100%;
}

/* The form itself */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Each field group */
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Labels for inputs */
.contact-label {
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Inputs, selects and textareas share a consistent look */
.contact-input,
.contact-select,
.contact-textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: #ffffff;
  color: var(--text-main);
}

/* Remove default resize handle on textareas in some browsers (optional) */
.contact-textarea {
  resize: vertical;
  min-height: 140px;
}

/* Focus styles – simple border change, no glow */
.contact-input:focus,
.contact-select:focus,
.contact-textarea:focus {
  outline: none;
  border-color: #111827;
}

/* Small helper / hint text under fields */
.contact-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Consent row: checkbox + text */
.contact-consent {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.55rem;
}

/* Checkbox itself */
.contact-consent input[type="checkbox"] {
  margin-top: 0.25rem;
}

/* Consent label text */
.contact-consent-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-main);
}

/* Style the link inside consent text minimally */
.contact-consent-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Submit row buttons */
.contact-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* Primary button style (can be reused elsewhere) */
.primary-button {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.6rem 1.4rem;
  background: #111827;
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Secondary reset button – outlined only */
.contact-reset-button {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 1.2rem;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

/* Small responsive tweaks */
@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .contact-intro-inner {
    padding: 0 0.25rem;
  }
}

/* -------------------------------------------------------
   PRIVACY POLICY PAGE – EXTRA STYLES
   (New classes only; existing styles remain as-is.)
--------------------------------------------------------*/

/* Intro area for legal pages */
.legal-intro-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Main title "Privacy Policy" */
.legal-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Last updated line */
.legal-updated {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Lead paragraph under the title */
.legal-lead {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Small note paragraph */
.legal-note {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Wrapper for all legal sections */
.legal-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 840px;
  margin: 0 auto;
}

/* Individual section block */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Subheadings (1., 2., etc.) */
.legal-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.15rem;
  margin: 0;
}

/* Body text */
.legal-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Lists within legal sections */
.legal-list {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.legal-list li + li {
  margin-top: 0.4rem;
}

/* Links inside legal text: underline only */
.legal-text a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Slightly tighter section padding for legal pages on small screens */
@media (max-width: 640px) {
  .legal-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .legal-sections {
    padding: 0 0.25rem;
  }
}




/* -------------------------------------------------------
   DESTINATION CATEGORY PAGES – EXTRA STYLES
--------------------------------------------------------*/

/* Intro stack: flag, title, back link */
.destination-intro-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.destination-flag-wrap {
  width: 80px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
}

.destination-flag {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Main destination title ("England") */
.destination-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}

/* Back link to parent category */
.destination-back-link {
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Region / town selector bar */
.destination-region-nav-inner {
  display: flex;
  justify-content: center;
}

.destination-region-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.destination-region-list a {
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.destination-region-list a:hover,
.destination-region-list a:focus-visible {
  text-decoration: none;
}

/* Tagline / intro line */
.destination-tagline-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.destination-tagline {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Featured destinations grid (simple cards, no heavy shadows) */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem;
}

.destination-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

/* Destination cards – consistent image size across all templates */
.destination-card-image {
  aspect-ratio: 4 / 3;        /* or 1 / 1 for square, 3 / 2 if you prefer */
  overflow: hidden;
  background: #e5e7eb;        /* soft fallback color behind images */
}

.destination-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* fill the box, crop as needed */
}

.destination-card-body {
  padding: 0.8rem 0.9rem 1rem;
}

.destination-card-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1rem;
  margin: 0;
}

/* Recent posts list */
.destination-post-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* Single post card */
.destination-post-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
  gap: 1.3rem;
  align-items: flex-start;
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 1rem;
}

/* Image link */
.destination-post-image-link {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.destination-post-image-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Text body */
.destination-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.destination-post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.1rem;
  margin: 0;
}

.destination-post-title a {
  text-decoration: none;
}

.destination-post-title a:hover,
.destination-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.destination-post-meta {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.destination-post-preview {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.destination-post-readmore {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* Responsive tweaks for posts */
@media (max-width: 768px) {
  .destination-post-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .destination-title {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
  }

  .destination-region-list {
    justify-content: center;
  }
}


/* -------------------------------------------------------
   BLOG POST PAGES – LAYOUT & TYPOGRAPHY
--------------------------------------------------------*/

/* Hero/title area */
.blog-hero-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Breadcrumb */
.blog-breadcrumb {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-breadcrumb a {
  text-decoration: none;
  color: inherit;
}

.blog-breadcrumb a:hover,
.blog-breadcrumb a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.blog-back-row {
  padding-top: 1.5rem;
  padding-bottom: 0;
}

.blog-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #f9fafb;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-main);
}

.blog-back-link:hover,
.blog-back-link:focus-visible {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

.breadcrumb-separator {
  margin: 0 0.25rem;
  opacity: 0.6;
}

/* Main blog title */
.blog-hero-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

/* Intro paragraph under the title */
.blog-intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-main);
}

/* Main content wrapper */
.blog-content-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* Individual blog sections */
.blog-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Section headings (per pub/segment) */
.blog-section-heading {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.4rem;
  margin: 0;
}

/* Centered images with gentle rounding */
.blog-section-image {
  margin: 0;
  max-width: 720px;
  align-self: center;
}

.blog-section-image img {
  width: 100%;
  display: block;
  border-radius: 18px;
  object-fit: cover;
}

/* Story text */
.blog-section-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.8;
  color: var(--text-main);
}

/* Gallery section */
/* -------------------------------------------------------
   BLOG – GALLERY WITH LIGHTBOX
--------------------------------------------------------*/

/* Thumbnail grid */
.blog-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.9rem;
  margin-top: 1.2rem;
}

.blog-gallery-thumb {
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);

  /* NEW: force a consistent box size */
  aspect-ratio: 4 / 5;   /* try 1 / 1 for squares, or 4 / 3 if you prefer wider */
}

/* Make every image fill its box, regardless of original shape */
.blog-gallery-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.18s ease;
}

.blog-gallery-thumb:hover img,
.blog-gallery-thumb:focus-visible img {
  transform: scale(1.03);
}

/* Lightbox overlay */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

/* Lightbox dialog */
.lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: 960px;
  width: min(90vw, 960px);
  margin: 0 auto;
  padding: 1.2rem 1.2rem 1.4rem;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lightbox-close {
  align-self: flex-end;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
}

.lightbox-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.8rem;
  align-items: center;
}

.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.lightbox-figure img {
  max-height: 70vh;
  width: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.lightbox-caption {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

.lightbox-nav {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: #f9fafb;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.3rem;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: #ffffff;
  box-shadow: var(--shadow-soft);
}

/* Responsive */
@media (max-width: 720px) {
  .lightbox-dialog {
    width: 92vw;
    padding: 0.9rem 0.9rem 1.1rem;
  }

  .lightbox-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lightbox-nav {
    order: -1;
    width: 40px;
    height: 28px;
    margin: 0 auto;
  }

  .lightbox-figure img {
    max-height: 60vh;
  }
}
/* Local back-to-top button in gallery section */
.blog-back-top-wrap {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
}

.blog-back-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Responsive tweaks */
@media (max-width: 640px) {
  .blog-hero-title {
    font-size: 1.7rem;
    letter-spacing: 0.04em;
  }

  .blog-content-inner {
    gap: 2rem;
  }
}



/* -------------------------------------------------------
   REGIONAL DIRECTORY PAGES (e.g. Cornwall)
--------------------------------------------------------*/

.region-hero-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.region-emblem-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.region-emblem {
  width: 80px;
  height: auto;
  border-radius: 12px;
}

.region-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 2.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}

.region-breadcrumb {
  margin: 0 0 0.8rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.region-breadcrumb a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.region-breadcrumb a:hover,
.region-breadcrumb a:focus-visible {
  text-decoration: none;
}

.region-intro-text {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-main);
}

/* Directory listing */
/* Directory listing – smaller, card-like posts similar to destination layout */

.region-directory .container {
  max-width: 780px; /* a bit narrower so content feels more focused */
}

/* Stack posts vertically with good spacing */
.region-post-list {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

/* Each post feels like a soft card but still minimal */
.region-post {
  padding: 1.8rem 1.6rem;
  border-radius: 22px;
  box-shadow: none; /* or keep your soft shadow if you like it */
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* Image: smaller, centered, with consistent width */
/* Regional directory post images – square and consistent */
.region-post-image {
  margin: 0 auto;
  max-width: 500px;          /* tweak this number to taste */
  width: 100%;
  aspect-ratio: 1 / 1;       /* ✅ make the box perfectly square */
  border-radius: 20px;
  overflow: hidden;
  background: #e5e7eb;       /* soft fallback behind images */
}

.region-post-image img {
  width: 100%;
  height: 100%;              /* ✅ fill the square */
  display: block;
  object-fit: cover;         /* crop to fit, no distortion */
}
/* Text stacked underneath, similar typography to your destination cards */
.region-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: center;
}

.region-post-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.2rem;
  margin: 0;
}

.region-post-title a {
  text-decoration: none;
}

.region-post-title a:hover,
.region-post-title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.region-post-meta {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.region-post-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-main);
}

.region-post-readmore {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-decoration: none;
  border-bottom: 1px solid #111827;
  padding-bottom: 0.1rem;
  align-self: center;
}

.region-post-readmore:hover,
.region-post-readmore:focus-visible {
  opacity: 0.8;
}

/* Slight tighten on small screens */
@media (max-width: 600px) {
  .region-directory .container {
    max-width: 100%;
  }

  .region-post {
    padding: 1.4rem 1.2rem;
  }

  .region-post-image {
    max-width: 340px;
  }
}

/* -------------------------------------------------------
   BLOG – TOP SPOTS SECTION
--------------------------------------------------------*/

/* Highlight badge for Ryan's favourite spots */
.blog-spot-fave {
  align-self: flex-start;
  margin-bottom: 0.3rem;
  padding: 0.16rem 0.7rem;
  border-radius: 999px;
  border: 1px solid #fed7aa;
  background: #fffbeb;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #92400e;
  white-space: nowrap;
}

.blog-spots-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.blog-spots-header {
  text-align: center;
}

.blog-spots-intro {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-main);
}

.blog-spots-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.blog-spot {
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: #ffffff;
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.blog-spot-title {
  font-family: "Playfair Display", "Times New Roman", serif;
  font-size: 1.05rem;
  margin: 0;
}

.blog-spot-meta {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.blog-spot-text {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* -------------------------------------------------------
   BLOG – MAP SECTION
--------------------------------------------------------*/

.blog-map-inner {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.blog-map-intro {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-main);
}

.blog-map-frame {
  border-radius: 22px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: var(--shadow-soft);
}

.blog-map-frame iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}

/* Small screen tweaks */
@media (max-width: 640px) {
  .blog-spots-inner,
  .blog-map-inner {
    max-width: 100%;
  }

  .blog-spot {
    padding: 1rem 1rem 1.1rem;
  }

  .blog-map-frame iframe {
    min-height: 260px;
  }
}



.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  padding: 0.9rem 1rem 1.1rem;
  background: rgba(249, 250, 251, 0.98);
  border-top: 1px solid var(--border-subtle);
  backdrop-filter: blur(8px);
}

.cookie-banner-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
  align-items: center;
  justify-content: space-between;
}

.cookie-banner-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex: 1 1 220px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-btn {
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.cookie-btn-accept {
  background: #111827;
  color: #ffffff;
}

.cookie-btn-decline {
  background: #ffffff;
  color: var(--text-main);
}

.cookie-btn:hover,
.cookie-btn:focus-visible {
  box-shadow: var(--shadow-soft);
}

.cookie-banner--visible {
  display: block;
}