/* =========================================================
   NUVO GROUPS page — builds on styles.css (core green palette)
   ========================================================= */

/* ---------- Hero ---------- */
.ghero { padding: clamp(130px, 16vw, 190px) 0 clamp(70px, 9vw, 120px); }
.ghero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 6vw, 90px); align-items: center; }
.ghero__title { font-size: clamp(3.4rem, 8vw, 7.4rem); margin-bottom: 24px; }
.ghero__copy .lede { max-width: 42ch; }
.ghero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 10px; }
.ghero__photos { position: relative; aspect-ratio: 1 / 1.08; }
.gpic { position: absolute; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px rgba(37, 39, 35, .15); }
.gpic img { width: 100%; height: 100%; object-fit: cover; }
.gpic--a { top: 0; right: 0; width: 70%; aspect-ratio: 4 / 4.8; }
.gpic--a img { object-position: center 20%; }
.gpic--b { bottom: 0; left: 0; width: 46%; aspect-ratio: 1; border: 8px solid var(--ivory); }

/* ---------- Statement (blur-to-clear) ---------- */
.gstatement { background: var(--charcoal); color: var(--ivory); padding: clamp(100px, 14vw, 190px) 0; }
.gstatement__title {
  font-weight: 900; font-size: clamp(2.6rem, 6.6vw, 6.4rem); line-height: .98; letter-spacing: -.04em;
  max-width: 16ch; margin-bottom: clamp(28px, 4vw, 44px);
}
.gstatement__title .w--accent { color: var(--sage); }
.gstatement__copy { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(244, 240, 231, .78); max-width: 52ch; margin: 0; }

/* ---------- What are groups ---------- */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.gcard { position: relative; background: var(--white); border: 1px solid var(--stone); border-radius: var(--radius); padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; transition: box-shadow .4s, border-color .4s; }
.gcard:hover { box-shadow: 0 24px 50px rgba(37, 39, 35, .08); border-color: var(--sage); }
.gcard__num { position: absolute; top: clamp(24px, 3vw, 34px); right: clamp(24px, 3vw, 34px); font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .14em; color: var(--muted); }
.gcard__icon { width: 52px; height: 52px; fill: none; stroke: var(--forest); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 30px; }
.gcard h3 { font-weight: 900; font-size: clamp(1.7rem, 2.4vw, 2.2rem); letter-spacing: -.03em; line-height: 1; margin-bottom: 14px; }
.gcard p { margin: 0 0 20px; color: var(--ink-soft); }
.gcard .link-arrow { margin-top: auto; align-self: flex-start; }

/* ---------- How to join ---------- */
.gjoin { background: var(--cream); }
.gjoin__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.gjoin__photo { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 4.8; }
.gjoin__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.gjoin__copy h2 { margin-bottom: 20px; }
.gsteps { list-style: none; margin: 28px 0 34px; padding: 0; }
.gsteps li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-top: 1px solid rgba(37, 39, 35, .14); }
.gsteps li:last-child { border-bottom: 1px solid rgba(37, 39, 35, .14); }
.gsteps span {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--forest); color: var(--white); font-family: var(--font-display); font-weight: 900; font-size: 18px;
}
.gsteps h3 { font-weight: 800; font-size: 1.25rem; margin-bottom: 4px; }
.gsteps p { margin: 0; color: var(--ink-soft); }

/* ---------- Dinner parties (text panel + photo side by side) ---------- */
.gdinner__card { display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; border-radius: var(--radius); background: var(--charcoal); color: var(--ivory); }
.gdinner__content { order: 1; padding: clamp(32px, 5vw, 70px); display: flex; flex-direction: column; justify-content: center; }
.gdinner__bg { order: 2; width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: center 35%; transition: transform 1.2s var(--ease); }
.gdinner__card:hover .gdinner__bg { transform: scale(1.03); }
.gdinner__content h2 { margin-bottom: 16px; }
.gdinner__content p:not(.eyebrow) { color: rgba(244, 240, 231, .85); margin: 0 0 28px; max-width: 42ch; }
.gdinner__content .btn { align-self: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ghero__grid, .gjoin__grid { grid-template-columns: 1fr; }
  .ghero__photos { max-width: 560px; width: 100%; margin: 0 auto; }
  .gcards { grid-template-columns: 1fr; }
  .gjoin__photo { max-width: 520px; }
  .gdinner__card { grid-template-columns: 1fr; }
  .gdinner__bg { order: 0; min-height: 0; aspect-ratio: 4 / 3; }
}

.gstatement__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(40px, 5vw, 64px); }
.gstatement__photos figure { border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
.gstatement__photos figure:nth-child(2) { transform: translateY(36px); }
.gstatement__photos img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .gstatement__photos { grid-template-columns: 1fr 1fr; }
  .gstatement__photos figure:nth-child(2) { transform: translateY(20px); }
  .gstatement__photos figure:nth-child(3) { display: none; }
}