/**
 * Restaurant skin overrides — main.css handles 95% of every skin via CSS
 * variables + modifier classes; this file is the "genuinely different detail"
 * exception documented in DESIGN_SYSTEM.md. Inspired by warm, rounded,
 * appetite-forward restaurant landing pages: cream backdrop, soft big-radius
 * cards, fully-pill buttons, amber star ratings.
 *
 * Everything here is scoped under body.skin--restaurant, so it has zero
 * effect on the other 14 skins sharing main.css.
 */

body.skin--restaurant {
  /* Bumping --radius cascades to every component that already reads
     var(--radius) — cards, images, spotlight, zones, testimonials — no need
     to touch each selector individually. */
  --radius: 18px;
  background: #FBF3E4; /* warm cream, distinct from card white */
}

/* Buttons: guarantee a full pill regardless of height (18px alone reads
   "rounded", not "pill", once padding is taller than ~36px). */
body.skin--restaurant .btn { border-radius: 50px; }

/* Warm cream alternate-section background instead of the shared neutral
   grey, so sections don't fight the cream page backdrop. */
body.skin--restaurant .section--light { background: #FEFAF3; }

/* Item cards (menu dishes): a little more lift + a warm-tinted shadow on
   hover instead of the neutral default, and a taller photo since food
   photography reads better big. */
body.skin--restaurant .item-card { border-color: #F1E4CE; }
body.skin--restaurant .item-card:hover {
  box-shadow: 0 12px 24px rgba(62, 39, 35, 0.16);
}
@media (min-width: 768px) {
  body.skin--restaurant .item-card__img { height: 220px; }
}

/* Star rating row (items.show_rating) reads closer to a review badge than
   plain inline text. */
body.skin--restaurant .item-card__rating {
  display: inline-block;
  background: var(--kreynova-accent);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.8rem;
}

/* Price + CTA row: pull the price and pill button a touch further apart so
   the row reads like a menu line, not a cramped pair. */
body.skin--restaurant .item-card__footer { gap: var(--sp-md); }

/* Testimonials: swap the left accent bar for a fully rounded card to match
   the softer language used everywhere else on this skin. */
body.skin--restaurant .testimonial { border-left: none; border: 1px solid #F1E4CE; }

/* About ("We Are More Than Multiple Service"): circular collage-style photo
   and a 2-column value grid now that this skin defines 6 values instead of
   the usual 3 — see languages/strings-*.php restaurant.about.value4-6. */
body.skin--restaurant .about__media img {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: 340px;
  margin: 0 auto;
  border: 8px solid #fff;
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  body.skin--restaurant .values { grid-template-columns: repeat(2, 1fr); gap: var(--sp-md) var(--sp-lg); }
}

/* Team ("Meet Our Chefs"): photo circles get the same warm cream ring as the
   hero photo instead of the flat accent-color fill used elsewhere. */
body.skin--restaurant .team-card__photo { border: 6px solid #fff; background: var(--kreynova-accent); }