/* =====================================
   WHAT / AANBOD — 100vh panel
   ===================================== */

.section-offer{
  height: calc(100vh - var(--header-height));
  background: var(--bg-section-sand);
  color: var(--text-on-light);
  overflow: visible;
}

/* Binnenkant vult 100vh, maar blijft “ademen” */
.offer-inner{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-block: clamp(1rem, 4vh, 3rem);
  gap: clamp(1rem, 2vh, 2rem);
}

/* Header */
.offer-header{
  display: grid;
  gap: 0.6rem;
  margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

.offer-header h2{
  margin: 0;
}

.offer-subtitle{
  margin: 0;
  color: var(--text-on-light);
  opacity: 0.9;
}

/* Grid */
.offer-grid{
  display: grid;
  gap: clamp(1rem, 2.2vw, 2rem);
  align-items: stretch;
}

/* Cards */
.offer-card{
  background: #5b6a55;
  color: var(--text-on-dark);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: 26px;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: var(--shadow-sm);
}

/* Featured middle card */
.offer-card--featured{
  transform: scale(1.03);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 2;
}

/* Headings in cards */
.offer-card h3{
  margin: 0 0 0.75rem;
}

/* Lead text */
.offer-card-lead{
  margin: 0 0 1rem;
  color: var(--text-on-dark);
  opacity: 0.98;
}

/* Tekst in cards */
.offer-card p{
  margin: 0 0 1rem;
  opacity: 0.95;
}

.offer-card p:last-of-type{
  margin-bottom: 1.4rem;
}

/* Link */
.offer-link{
  margin-top: auto;
  align-self: flex-start;
  color: var(--text-link-on-dark);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition:
    color 0.25s ease,
    text-underline-offset 0.25s ease,
    opacity 0.25s ease;
}

.offer-link:hover{
  color: var(--gold-300);
  text-underline-offset: 6px;
}

.link-arrow{
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.25s ease;
}

.offer-link:hover .link-arrow{
  transform: translateX(4px);
}

/* Desktop: 3 kolommen */
@media (min-width: 901px){
  .offer-grid{
    grid-template-columns: 1fr 1.08fr 1fr;
  }

  .offer-card{
    min-height: 240px;
  }
}

/* Mobile */
@media (max-width: 900px){
  .section-offer{
    height: auto;
    overflow: visible;
  }

  .offer-inner{
    padding-top: 3rem;
  }

  .offer-grid{
    grid-template-columns: 1fr;
    align-content: start;
    gap: 2rem;
  }

  .offer-card{
    border-radius: 24px;
  }

  .offer-card--featured{
    transform: none;
  }
}

@media (max-width: 520px){
  .offer-inner{
    padding-block: clamp(3rem, 4vh, 3rem);
    gap: 1.25rem;
  }

  .offer-card{
    padding: 1.35rem;
  }
}