/* ================================================================
   index.css — Home page ONLY
   style.css must be loaded first.
   ================================================================ */

/* ── HERO
   Screenshot: large image at top (contained, not full-bleed),
   text BELOW on white background — H1 bold serif, body, black btn
   FILE: hero-bg.jpg
   ================================================================ */


.hero {
  background: var(--white);
padding-top: 32px;
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.hero-img-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--px);
  margin-bottom: 2.5rem;
}
.hero-img-wrap img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.hero-content {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--px);
  text-align: center;
}
.hero-content h1 {
  font-family: var(--font);
  font-size: var(--h1);
  font-weight: 700;
  color: var(--black);
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hero-content p {
  font-family: var(--font);
  font-size: var(--body);
  color: var(--body-grey);
  line-height: var(--body-lh);
  margin-bottom: 2rem;
  max-width: 620px;
  margin-inline: auto;
}

/* ── WE ARE RIVEARA
   Screenshot: full-width gradient, H2 white centered,
   body text white centered, white outline "Learn more" btn
   ================================================================ */
.we-are {
  background: var(--gradient);
  padding-block: clamp(4rem, 8vw, 7rem);
  text-align: center;
}
.we-are-inner {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.we-are-inner h2 {
  font-family: var(--font);
  font-size: var(--h2);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}
.we-are-inner p {
  font-family: var(--font);
  font-size: var(--body);
  color: rgba(255,255,255,.93);
  line-height: var(--body-lh);
  text-align: center;
}

/* ── OUR EXPERIENCES
   Screenshot exact layout:
   Left column:  top = landscape photo (short), bottom = landscape photo (short)
   Right column: ONE tall portrait photo spanning full height of both rows
   Total: 3 photos, 2-col grid, right spans both rows.
   FILES: exp-1.jpg (left top), exp-2.jpg (left bottom), exp-3.jpg (right tall)
   ================================================================ */
.experiences{
  background: var(--white);
}

.exp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:100%;
  margin-bottom:30px;
}

.exp-cta{
  text-align:center;
}

.exp-col{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.exp-img{
  overflow:hidden;
}

.exp-img img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

.exp-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 760px) {
  .exp-img-c { grid-row: auto; aspect-ratio: 4/3; }
}
@media (max-width: 520px) {
  .exp-grid { grid-template-columns: 1fr; }
  .exp-img-c { grid-row: auto; aspect-ratio: 4/3; }
  .hero-content h1 { font-size: 26px; }
}