@charset "utf-8";

/* =================================================================
   HARTENBOS - AREA PAGE STYLESHEET
   Loads AFTER css/styles.css and inherits its reset, base styles,
   type scale, spacing scale and shared components (.container,
   .icon, .eyebrow, .btn, header/footer, etc).

   This file only adds what's unique to the Hartenbos page:
   1. Hartenbos colour tokens
   2. Area hero
   3. "Things to Do" interest cards
   4. Local Amenities / Points of Interest directory
   5. "Good to Know" banner
   6. Closing slogan

   To reuse for another area (Groot Brak, Mossel Bay, Pinnacle
   Point, etc), duplicate this file, swap the tokens in section 1
   for that area's palette, and update section/card copy - the
   class names and layout rules can stay as-is.
   ================================================================= */

/* ---------- 1. Hartenbos colour tokens ---------- */
:root {
  --color-hb-teal:      #0B5D59; /* subheading, icons, badges, links on light bg */
  --color-hb-teal-dark: #073F3D; /* hover / pressed state for teal elements */
  --color-hb-deep:      #0A4A63; /* deep teal-navy - Good to Know banner */
  --color-hb-sand:      #F6F1E7; /* warm section background */
  --color-hb-sand-dark: #EDE4D2; /* subtle borders/dividers on sand */
}

/* ---------- 2. Area hero ---------- */
.area-hero {
  position: relative;
  min-height: clamp(28rem, 82vh, 46rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-hb-deep) 0%, var(--color-navy-900) 100%);
}

.area-hero__media {
  position: absolute;
  inset: 0;
}

/* The img carries its own gradient as a "background" - this shows
   through automatically as a placeholder for as long as the src
   is missing/broken, and is simply painted over once a real photo
   is dropped in at the path below. No markup changes needed later. */
.area-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, var(--color-hb-deep) 0%, var(--color-navy-900) 100%);
filter: blur(5px);	
}

.area-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 16, 28, 0.22) 0%, rgba(4, 24, 36, 0.58) 55%, rgba(3, 18, 28, 0.92) 100%);
}

.area-hero__content {
  position: relative;
  color: var(--color-white);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
  max-width: 44rem;
}

.area-hero__title {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-white);
}

.area-hero__subtitle {
  margin-top: var(--space-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-gold-500);
}

.area-hero__desc {
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- 3. Things to Do / interest cards ---------- */
.interests {
  padding-block: var(--space-3xl);
  background: var(--color-hb-sand);
}

.interests h2 { margin-top: var(--space-3xs); margin-bottom: var(--space-xl); }

.interests__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg) var(--space-lg);
}

.interest-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.interest-card:hover,
.interest-card:focus-within {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.interest-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
}

.interest-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-hb-teal) 18%, white), color-mix(in srgb, var(--color-hb-teal) 40%, white));
}

.interest-card__number {
  position: absolute;
  left: var(--space-md);
  bottom: calc(-1 * var(--space-md));
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-hb-teal);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  box-shadow: 0 0 0 4px var(--color-white);
}

.interest-card__body {
  padding: calc(var(--space-lg) + var(--space-xs)) var(--space-lg) var(--space-lg);
}

.interest-card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--color-hb-teal);
  margin-bottom: var(--space-sm);
}

.interest-card__body h3 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-xs);
}

.interest-card__body p {
  font-size: var(--fs-sm);
  color: var(--color-body);
}

@media (min-width: 640px) {
  .interests__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .interests__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 4. Local Amenities / Points of Interest ---------- */
.amenities {
  padding-block: 0 var(--space-3xl);
  background: var(--color-hb-sand);
}

.amenities h2 { margin-top: var(--space-3xs); margin-bottom: var(--space-sm); }

.amenities__intro {
  max-width: 58ch;
  font-size: var(--fs-base);
  color: var(--color-body);
  margin-bottom: var(--space-xl);
}

.amenities__categories {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.amenity-category {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.amenity-category__summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  list-style: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--color-navy-900);
  transition: background-color var(--t-fast);
}
.amenity-category__summary::-webkit-details-marker,
.amenity-category__summary::marker { display: none; content: ''; }
.amenity-category__summary:hover { background: var(--color-hb-sand); }

.amenity-category__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-hb-teal);
  flex-shrink: 0;
}

.amenity-category__title { flex: 1; }

.amenity-category__count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--color-muted);
  white-space: nowrap;
}

.amenity-category__chevron {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-muted);
  flex-shrink: 0;
  transition: transform var(--t-base);
}
.amenity-category[open] .amenity-category__chevron { transform: rotate(180deg); }

.amenity-category__body {
  padding: var(--space-xs) var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--color-hb-sand-dark);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.amenity-group__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-hb-teal);
  margin-bottom: var(--space-sm);
}

.amenity-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.amenity-item {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.amenity-item__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-navy-900);
}

.amenity-item__location {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--color-muted);
}
.amenity-item__location .icon {
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  color: var(--color-hb-teal);
  flex-shrink: 0;
}

.amenity-item__note {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-body);
}

.amenity-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-3xs);
}

.amenity-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-hb-teal);
  background: var(--color-white);
  border: 1px solid var(--color-hb-teal);
  border-radius: var(--radius-full);
  padding: 0.35em 0.75em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.amenity-item__link .icon { width: 0.95em; height: 0.95em; }
.amenity-item__link:hover,
.amenity-item__link:focus-visible {
  background: var(--color-hb-teal);
  color: var(--color-white);
}

@media (min-width: 640px) {
  .amenity-list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .amenity-list { grid-template-columns: repeat(3, 1fr); }
  .amenity-category__summary { padding: var(--space-lg) var(--space-xl); }
  .amenity-category__body { padding: var(--space-xs) var(--space-xl) var(--space-xl); }
}

/* ---------- 5. Good to Know ---------- */
.good-to-know {
  padding-block: 0 var(--space-3xl);
  background: var(--color-hb-sand);
}

.good-to-know__panel {
  background: var(--color-hb-deep);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.good-to-know__label {
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-white);
  flex-shrink: 0;
}

.good-to-know__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.good-to-know__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.good-to-know__icon {
  width: 1.75rem;
  height: 1.75rem;
  flex-shrink: 0;
  color: var(--color-gold-500);
}

.good-to-know__list p {
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 768px) {
  .good-to-know__panel {
    flex-direction: row;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
  }
  .good-to-know__label { width: 9rem; }
  .good-to-know__list { flex-direction: row; flex: 1; gap: 0; }
  .good-to-know__list li {
    flex: 1;
    padding-inline-start: var(--space-lg);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
  }
  .good-to-know__list li:first-child {
    padding-inline-start: 0;
    border-left: none;
  }
}

/* ---------- 6. Closing slogan ---------- */
.area-outro {
  padding-block: 0 var(--space-3xl);
  background: var(--color-hb-sand);
  text-align: center;
}

.area-outro__tagline {
  font-style: italic;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-hb-teal);
  margin-bottom: var(--space-2xs);
}

.area-outro__heading {
  font-size: var(--fs-lg);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}