@charset "utf-8";

/* =================================================================
   GROOT BRAK - 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).

   Structure mirrors css/hartenbos.css exactly - only the tokens in
   section 1 differ. If the layout ever needs to change for every
   area page at once, hartenbos.css, this file, and its siblings
   will each need the same edit (no shared partial, per the project's
   no-build-step setup).
   ================================================================= */

/* ---------- 1. Groot Brak colour tokens ---------- */
:root {
  --color-gb-teal:      #146157; /* subheading, icons, badges, links on light bg */
  --color-gb-teal-dark: #0D3F38; /* hover / pressed state for teal elements */
  --color-gb-deep:      #0F4A42; /* deep tone - Good to Know banner */
  --color-gb-sand:      #F6F1E7; /* warm section background */
  --color-gb-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-gb-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-gb-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);
}

/* Optional italic flourish line - some areas have one, some don't */
.area-hero__flourish {
  margin-top: var(--space-sm);
  font-style: italic;
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  color: var(--color-gold-500);
}

/* ---------- 3. Things to Do / interest cards ---------- */
.interests {
  padding-block: var(--space-3xl);
  background: var(--color-gb-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-gb-teal) 18%, white), color-mix(in srgb, var(--color-gb-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-gb-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-gb-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. Good to Know ---------- */
.good-to-know {
  padding-block: 0 var(--space-3xl);
  background: var(--color-gb-sand);
}

.good-to-know__panel {
  background: var(--color-gb-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;
  }
}

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

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

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