/* Modern Expat presentation system: shared hierarchy, spacing, section bands and restrained rounding. */
:root {
  --preview-radius-sm: 8px;
  --preview-radius-md: 10px;
  --preview-radius-lg: 12px;
  --preview-shadow: 0 14px 34px rgba(20, 20, 18, 0.08);
  --preview-champagne: #f4efe7;
  --preview-section-space: clamp(64px, 7vw, 104px);
  --preview-heading-section: clamp(44px, 5vw, 72px);
  --preview-heading-card: clamp(28px, 2.5vw, 38px);
}

/* Shared controls and forms */
.btn,
.nobo-promo-cta,
.cta-form button,
.cta-form input,
.cta-form textarea,
.cta-form select {
  border-radius: var(--preview-radius-sm);
}

.cta-form,
.panel,
.property-search,
.property-enquiry-bar {
  border-radius: var(--preview-radius-lg);
}

.cta-form,
.panel {
  box-shadow: var(--preview-shadow);
}

/* Homepage: retain the editorial composition, soften only the component edges. */
.hero-feature,
.hero-feature figure,
.hero-feature img,
.guide-card,
.guide-card figure,
.guide-card img,
.card-article,
.card-article figure,
.card-article img,
.home-event-card,
.home-event-media,
.home-event-media img,
.home-category-media,
.home-category-media img,
.nobo-promo-inner,
.nobo-promo-media {
  border-radius: var(--preview-radius-md);
}

.hero-feature,
.guide-card,
.card-article,
.home-event-card,
.nobo-promo-inner {
  overflow: hidden;
}

.guide-card,
.card-article,
.home-event-card,
.hero-feature {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.guide-card:hover,
.guide-card:focus-visible,
.card-article:hover,
.card-article:focus-within,
.home-event-card:hover,
.home-event-card:focus-within,
.hero-feature:hover,
.hero-feature:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--preview-shadow);
}

.home-events-grid,
.stories,
.country-guides-home {
  gap: clamp(14px, 1.6vw, 22px);
}

/* Homepage hierarchy: hero, section heading, card heading, utility label. */
.section-head h2.display,
.events-section-head h2,
.stories .intro h2.display,
.nobo-promo-copy h2 {
  margin: 8px 0 0;
  font-size: var(--preview-heading-section);
  line-height: 0.94;
  letter-spacing: 0;
}

.section-head { margin-bottom: clamp(30px, 4vw, 48px); }
.section-head--stack { gap: 12px; }
.section-head--stack p,
.events-section-head p,
.stories .intro p {
  max-width: 62ch;
  margin-top: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* Use champagne as a complete band rather than a line between cards. */
.home-events {
  width: 100vw;
  margin: var(--preview-section-space) 0;
  margin-left: calc(50% - 50vw);
  padding: var(--preview-section-space) max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)));
  background: var(--preview-champagne);
}

.home-events-grid {
  border: 0;
  background: transparent;
}

.home-event-card { border: 1px solid rgba(22, 22, 22, 0.08); }
.home-event-card:hover,
.home-event-card:focus-within { background: #fff; }
.home-event-card h3 {
  min-height: 3.24em;
  margin: 12px 0 10px;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 1.08;
}

/* Latest stories use the same section-title rule and equal card surfaces. */
.stories.latest-articles {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
  padding: var(--preview-section-space) 0;
}

.stories.latest-articles .intro {
  grid-column: 1 / -1;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 4px;
}

.stories.latest-articles .intro h2 br { display: none; }
.stories.latest-articles .card-article {
  min-width: 0;
  padding: 14px 14px 18px;
  border: 1px solid var(--line);
  background: #fff;
}

.stories.latest-articles .card-article h3 {
  min-height: 2.5em;
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
}

.stories.latest-articles .card-article figure { margin: 0 0 16px; }

/* White editorial sections use white cards with a quiet champagne hover. */
.guides-tile,
.article-section-card,
.guide-related-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--preview-radius-md);
  background: #fff;
}

.guides-tile:hover,
.guides-tile:focus-within,
.article-section-card:hover,
.article-section-card:focus-visible,
.guide-related-card:hover,
.guide-related-card:focus-visible {
  background: var(--preview-champagne);
  border-color: #c7baa4;
}

.guides-tile figure,
.guides-tile figure img { border-radius: var(--preview-radius-md) var(--preview-radius-md) 0 0; }

.property-card,
.event-card-media--directory,
.event-card-media--directory img {
  border-radius: var(--preview-radius-md);
}

.property-card { overflow: hidden; }
.events-filters select,
.events-filters input,
.events-filter-reset { border-radius: var(--preview-radius-sm); }

.country-guides-home .guide-card h4,
.guide-card h3 {
  margin: 9px 0 8px;
  font-size: 18px;
  line-height: 1.25;
}

/* Mono Champaca: keep the existing grids and palette, with restrained radii. */
.development-hero-media,
.development-hero-media img,
.development-facts article,
.development-type-grid article,
.development-gallery-grid figure,
.development-gallery-grid img,
.development-plan-grid a,
.development-plan-grid img,
.development-master-plan,
.development-master-plan img,
.development-cost-grid article,
.development-question-grid article,
.development-enquiry .cta-form {
  border-radius: var(--preview-radius-md);
}

.development-hero-media,
.development-facts article,
.development-type-grid article,
.development-gallery-grid figure,
.development-plan-grid a,
.development-master-plan,
.development-cost-grid article,
.development-question-grid article,
.development-enquiry .cta-form {
  overflow: hidden;
}

.development-type-grid article,
.development-plan-grid a,
.development-cost-grid article,
.development-question-grid article {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.development-type-grid article:hover,
.development-plan-grid a:hover,
.development-plan-grid a:focus-visible,
.development-cost-grid article:hover,
.development-question-grid article:hover {
  transform: translateY(-2px);
  box-shadow: var(--preview-shadow);
}

.development-type-grid,
.development-cost-grid {
  gap: 8px;
  padding: 0;
  background: transparent;
}

.development-hero { padding: 0; }
.development-intro,
.development-section,
.development-costs,
.development-enquiry {
  padding-top: var(--preview-section-space);
  padding-bottom: var(--preview-section-space);
}

.development-section-head {
  gap: clamp(32px, 6vw, 88px);
  margin-bottom: clamp(36px, 4vw, 56px);
}

.development-intro h2,
.development-section-head h2,
.development-enquiry h2 {
  max-width: 14ch;
  margin-top: 10px;
  font-size: var(--preview-heading-section);
  line-height: 0.96;
  letter-spacing: 0;
}

.development-section-head > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

.development-facts {
  gap: 10px;
  padding: 0;
  background: transparent;
}

.development-facts article {
  border: 1px solid rgba(22, 22, 22, 0.08);
  box-shadow: 0 8px 22px rgba(20, 20, 18, 0.04);
}

.development-type-grid h3,
.development-question-grid h3 {
  font-size: var(--preview-heading-card);
  line-height: 0.98;
}

.development-type-grid h3 { margin: 48px 0 16px; }
.development-question-grid h3 { margin: 40px 0 14px; }
.development-inclusions h3,
.development-master-plan strong,
.development-plan-grid strong { line-height: 1; }

.development-guide-links {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--preview-radius-md);
}

.development-sources h2 {
  font-size: clamp(32px, 3vw, 42px);
  line-height: 1;
}

.development-plan-grid,
.development-question-grid {
  gap: clamp(14px, 1.5vw, 20px);
}

.development-gallery-grid {
  gap: 8px;
  padding: 8px;
}

@media (max-width: 640px) {
  :root {
    --preview-section-space: 64px;
    --preview-heading-section: clamp(42px, 12vw, 52px);
    --preview-heading-card: 32px;
  }

  .home-events {
    padding-right: var(--pad);
    padding-left: var(--pad);
  }

  .home-event-card h3 { min-height: 0; }

  .stories.latest-articles { grid-template-columns: 1fr; }
  .stories.latest-articles .intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .stories.latest-articles .card-article h3 { min-height: 0; }

  .development-intro h2,
  .development-section-head h2,
  .development-enquiry h2 {
    max-width: 12ch;
    font-size: var(--preview-heading-section);
    line-height: 0.98;
  }

  .development-section-head { gap: 18px; }

  .development-gallery-grid {
    padding: 6px;
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-card,
  .card-article,
  .home-event-card,
  .hero-feature,
  .development-type-grid article,
  .development-plan-grid a,
  .development-cost-grid article,
  .development-question-grid article,
  .development-gallery-grid img {
    transition: none !important;
  }

  .guide-card:hover,
  .guide-card:focus-visible,
  .card-article:hover,
  .card-article:focus-within,
  .home-event-card:hover,
  .home-event-card:focus-within,
  .hero-feature:hover,
  .hero-feature:focus-within,
  .development-type-grid article:hover,
  .development-plan-grid a:hover,
  .development-plan-grid a:focus-visible,
  .development-cost-grid article:hover,
  .development-question-grid article:hover {
    transform: none;
  }
}