/* Tamara Villas - the "Warm editorial" (2a) look, expressed as Bootstrap 5.3
   variable overrides. Bootstrap does the layout and the cross-browser work;
   this file only carries the tokens and the few things Bootstrap has no
   utility for. Tokens are lifted from the Industry design system. */

@import url('fonts.css');

/* Everything in Bootstrap is sized in rem, so lifting the root size scales body
   copy, headings, buttons and spacing together and keeps the design's
   proportions. Barlow runs small for its point size, which is why the default
   16px base read as cramped. */
html {
  font-size: 118.75%; /* 19px */

  /* The navigation bar is sticky-top, so a jump to a #fragment would otherwise
     land the target underneath it. This holds the section clear of the bar. */
  scroll-padding-top: 5rem;
}

:root {
  /* --- Industry tokens --- */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-divider: rgba(29, 31, 32, 0.16);

  --color-neutral-400: #b4b4b7;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  /* --- Bootstrap, retuned --- */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size: 1rem;
  --bs-emphasis-color: var(--color-text);
  --bs-secondary-color: var(--color-neutral-700);

  --bs-primary: var(--color-accent);
  --bs-primary-rgb: 89, 128, 166;
  --bs-link-color: var(--color-accent-700);
  --bs-link-color-rgb: 65, 97, 128;
  --bs-link-hover-color: var(--color-accent-800);

  --bs-border-color: var(--color-divider);
  --bs-border-radius-sm: .5rem;
  --bs-border-radius: .6875rem;  /* 11px - buttons */
  --bs-border-radius-lg: .875rem; /* 14px - small figures */
  --bs-border-radius-xl: 1rem;    /* 16px - large images, frosted card */

  --bs-focus-ring-color: rgba(89, 128, 166, .4);
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .navbar-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.01em;
}

/* The uppercase micro-label that sits above headings throughout the design. */
.kicker {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

/* A big Barlow Condensed number: the fact strip and the distance stats. */
.stat {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1;
  color: var(--color-accent-700);
}

/* The signature element: a frosted glass panel over the hero photograph. */
.glass-card {
  background: rgba(248, 248, 249, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 12px 32px rgba(43, 43, 45, .22);
  padding: 1.5rem;
}

/* Padding lives here rather than in utility classes because the top needs to be
   larger than the bottom. The kicker's uppercase line box sits tight to its top
   edge while the button below carries its own visual weight, so equal padding
   reads as bottom-heavy. */
@media (min-width: 992px) {
  .glass-card {
    padding: 3.5rem 3rem 2.75rem;
  }
}

/* Full-bleed hero. Bootstrap has no height utility past the vh helpers, and no
   spacer past 3rem.

   min-height, not height: the card is as tall as its copy, so a fixed height
   made the gap above it the leftover after the card and its bottom margin. On a
   short window, or with a heading that wrapped, that leftover shrank to nothing
   while the gap below kept its margin, and the two never matched. Both gaps are
   now this padding, so they stay equal and the section grows when the copy
   needs the room. */
.hero {
  min-height: clamp(26rem, 62vh, 40rem);
  padding-block: 2rem;
}

/* Matches the card's own top padding, so the frosted panel sits in the
   photograph with the same air around it that its copy has inside it. */
@media (min-width: 992px) {
  .hero {
    padding-block: 3.5rem;
  }
}

/* Shorter than the villa hero, but tall enough that the text card sits inside
   it with room above and below rather than filling it edge to edge. */
.hero-compact {
  min-height: clamp(26rem, 60vh, 38rem);
}

.hero img,
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The fill is accent-700, not the base accent. White on the base accent is
   4.15:1, which fails WCAG AA for text; accent-700 gives 6.47:1. The design
   system says the same thing: the accent-to-ground pair is tuned for icons and
   chrome, and text-weight use wants a deep ramp step. */
.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-accent-700);
  --bs-btn-border-color: var(--color-accent-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color-accent-800);
  --bs-btn-hover-border-color: var(--color-accent-800);
  --bs-btn-active-bg: var(--color-accent-900);
  --bs-btn-active-border-color: var(--color-accent-900);
  --bs-btn-font-family: var(--font-heading);
  --bs-btn-font-weight: 600;
}

.btn-quiet {
  --bs-btn-color: var(--color-accent-700);
  --bs-btn-border-color: var(--color-divider);
  --bs-btn-hover-color: var(--color-accent-800);
  --bs-btn-hover-bg: var(--color-accent-100);
  --bs-btn-hover-border-color: var(--color-accent);
  --bs-btn-font-family: var(--font-heading);
  --bs-btn-font-weight: 600;
}

.navbar-brand {
  letter-spacing: .06em;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  --bs-nav-link-color: var(--color-text);
  --bs-nav-link-hover-color: var(--color-accent);
}

.bg-surface {
  background: var(--color-surface);
}

/* The location map. A fixed height reads better than a fixed ratio here: a wide
   ratio goes uselessly short on a phone, and a tall one wastes desktop space. */
.map-embed {
  height: clamp(15rem, 34vh, 24rem);
  border: 1px solid var(--color-divider);
}

/* The map is a picture drawn by _tools/mapshot.py, wider than the band is
   ever shown, so it is cropped rather than squashed. The marker sits in the
   middle of the picture, which is the part cropping keeps. */
.map-embed a,
.map-embed img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.map-embed img {
  object-fit: cover;
}

/* The fact strip's hairline dividers. Bootstrap ships no responsive variant of
   .border-start, and the rule must not apply once the cells stack. */
@media (min-width: 992px) {
  .border-start-lg {
    border-left: 1px solid var(--color-divider);
  }
}

/* The footer follows a bg-surface band, so it takes the accent's deepest step as
   a full field with the type reversed out. The design system allows exactly this
   for a section that needs to read as ground rather than as another panel. */
.site-footer {
  background: var(--color-accent-900);
  color: #eef2f6;
  --bs-border-color: rgba(255, 255, 255, .16);
  --bs-link-color: #ffffff;
  --bs-link-hover-color: #ffffff;
}

.site-footer a {
  color: rgba(238, 242, 246, .78);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #ffffff;
  text-decoration: underline;
}

.site-footer .kicker {
  color: var(--color-accent-300);
}

.site-footer .text-body-secondary {
  color: rgba(238, 242, 246, .68) !important;
}

/* A single horizontal strip of cards. Bootstrap's carousel shows one slide at a
   time, so this uses native scroll-snap instead: real touch swiping, keyboard
   scrolling and no JavaScript needed for the scrolling itself. */
.card-strip {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--color-neutral-400) transparent;
  padding-bottom: .75rem;
  /* Let the first and last card sit flush with the page gutter. */
  scroll-padding-inline: 0;
}

.card-strip > * {
  flex: 0 0 clamp(15rem, 24vw, 21rem);
  scroll-snap-align: start;
}

.card-strip::-webkit-scrollbar {
  height: 8px;
}

.card-strip::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: 4px;
}

.card-strip::-webkit-scrollbar-track {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .card-strip { scroll-behavior: auto; }
}

/* The photo viewer. Bootstrap's modal handles the shell; these rules give it a
   dark stage, sit the controls over the image and keep the photo inside the
   viewport at any aspect ratio. */
/* Bootstrap appends .modal-backdrop to <body> as a sibling of .modal, so these
   variables have to be set on the backdrop itself; scoping them to .lightbox
   never reaches it. The default 50% black left the page legible behind the
   photo, which made the viewer read as a tint rather than a stage. */
.modal-backdrop {
  --bs-backdrop-bg: #14181c;
  --bs-backdrop-opacity: 1;
}

.lightbox .modal-content {
  background: #14181c;
  border: 0;
  border-radius: 0;
}

.lightbox .lightbox-stage {
  position: relative;
  min-height: 0;
  padding: 3.5rem 1rem 0;
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--bs-border-radius-lg);
}

.lightbox-caption {
  color: rgba(238, 242, 246, .82);
}

.lightbox-caption .kicker {
  color: var(--color-accent-300);
}

.lightbox .lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  padding: 1rem;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: rgba(255, 255, 255, .28);
}

.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* Thumbnails are buttons so they are keyboard reachable; strip the chrome. */
.lightbox-open {
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  display: block;
}

/* Cards in the "Around Coral Bay" grid lift slightly on hover. */
.card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .18s ease;
}

.card-link:hover {
  transform: translateY(-3px);
}

.card-link:hover .card-title {
  color: var(--color-accent-700);
}

@media (prefers-reduced-motion: reduce) {
  .card-link { transition: none; }
  .card-link:hover { transform: none; }
}