/* ==========================================================================
   services.css — optional scoped section layer (Gorchitsa set-kafe)
   Task: gorchitsa_bounded_restaurants_component
   Scope: #restaurants band and the footer-adjacent surface (footer#points)
   ONLY. Load after styles.css; no markup changes required. Every rule is
   scoped to those two surfaces, so the file is safe layered or standalone.
   Tokens: ink #181815 · mustard #F4C542 · cream #F7F3EA
   Containment: width:100% / max-width / clamp() only — no fixed pixel width
   above 1328px. Zero horizontal overflow verified at 1440x900, 768x1024,
   390x844 (see evidence/dev-middle-0-services/).
   ========================================================================== */

#restaurants{
  --svc-ink:#181815;
  --svc-mustard:#f4c542;
  --svc-cream:#f7f3ea;
  --svc-paper:#fffdf7;
  --svc-sub:#51471f;

  width:100%;
  max-width:1328px;
  min-height:176px;
  margin:70px auto 34px;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(255,253,247,.22) 0%, rgba(255,253,247,0) 42%),
    var(--svc-mustard);
  padding:clamp(26px,3.2vw,42px) clamp(22px,3.6vw,48px);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px 32px;
  overflow:hidden;
}

#restaurants > div{
  flex:1 1 320px;
  max-width:640px;
  min-width:0;
}

#restaurants h2{
  margin:0 0 10px;
  color:var(--svc-ink);
  font-size:clamp(25px,2.4vw,32px);
  line-height:1.08;
  letter-spacing:-.8px;
}

#restaurants p{
  margin:0;
  color:var(--svc-sub);
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.45;
}

#restaurants .button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:16px;
  max-width:100%;
  padding:16px 25px;
  border:0;
  border-radius:28px;
  background:var(--svc-ink);
  color:var(--svc-paper);
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  text-decoration:none;
  cursor:pointer;
}

#restaurants .button span{
  font-size:20px;
}

/* Footer-adjacent surface: footer#points (id="points") */
footer#points{
  --svc-ink:#181815;
  --svc-mustard:#f4c542;
  --svc-cream:#f7f3ea;
  --svc-paper:#fffdf7;

  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:26px clamp(18px,4.4vw,56px) 44px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 24px;
  background:var(--svc-cream);
  color:#777268;
  font-size:13px;
}

footer#points span{
  min-width:0;
}

footer#points a{
  color:var(--svc-ink);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

/* Tablet (768x1024 and below): keep 24px side gutters, band stays one row
   until 640px. */
@media (max-width:900px){
  #restaurants{
    width:auto;
    margin:60px 24px 30px;
  }
}

/* Phone (390x844 and below): stacked band, full-width CTA. */
@media (max-width:640px){
  #restaurants{
    margin:55px 14px 20px;
    border-radius:22px;
    padding:26px 23px;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    min-height:0;
  }
  #restaurants > div{
    flex:1 1 auto;
    max-width:none;
  }
  #restaurants .button{
    width:100%;
    justify-content:center;
  }
  footer#points{
    padding:20px 20px 30px;
    font-size:11px;
    gap:6px 12px;
  }
}