/* ============================================================
   CUSTOM — Per-store micro-overrides for Cheryl's Country Kitchen
   This file is generated per restaurant. Override tokens or add
   store-specific rules here. Do NOT edit global.css, theme.css,
   or style.css directly for per-store changes.
   ============================================================ */

/* ============================================================
   MENU — Dine-in-only note on its own line
   A few dessert descriptions carry a trailing "Dine-in only."
   sentence separated by a real newline in menu.js; render that
   newline instead of collapsing it to a space.
   ============================================================ */

.item-desc,
.gs-home .gs-ref-item p {
  white-space: pre-line;
}

/* ============================================================
   ABOUT — "A Glimpse of Our Kitchen"
   Nine photos laid out as a balanced 3 x 3 block.

   style.css ships this gallery as a 4-up row that collapses to
   2-up at 1024px. With nine images both of those leave a lone
   photo stranded on the last row, so the column count is pinned
   to three at every width and only the gap and the corner sweep
   scale down. Three columns divides nine exactly, so the block
   stays square on phones as well as desktop.
   ============================================================ */

.gs-about-gallery-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  max-width: 62rem;
  margin-inline: auto;
}

/* Square cells. Five of the nine originals are 1:1 and the rest sit
   close to it, so a square crop trims far less than the inherited
   3:4 portrait while keeping all three row heights identical. */
.gs-about-gallery-grid .gs-about-gallery-item img {
  aspect-ratio: 1 / 1;
}

/* Hold the 3 x 3 through the breakpoint where style.css would
   otherwise drop the grid to two columns. */
@media (max-width: 1024px) {
  .gs-about-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

/* Cells are ~30vw here: shrink the corner sweep and the inset gold
   rule to match, or they overwhelm the photo. */
@media (max-width: 640px) {
  .gs-about-gallery-grid {
    gap: 0.5rem;
  }

  .gs-about-gallery-grid .gs-about-gallery-item,
  .gs-about-gallery-grid .gs-about-gallery-item:nth-child(even) {
    border-radius: 16px 4px 16px 4px;
  }

  .gs-about-gallery-grid .gs-about-gallery-item:nth-child(even) {
    border-radius: 4px 16px 4px 16px;
  }

  .gs-about-gallery-grid .gs-about-gallery-item::after {
    inset: 5px;
    border-width: 1px;
    border-radius: 12px 3px 12px 3px;
  }

  .gs-about-gallery-grid .gs-about-gallery-item:nth-child(even)::after {
    border-radius: 3px 12px 3px 12px;
  }
}

/* ============================================================
   ABOUT - Customer reviews grouped by platform
   Three groups (TripAdvisor 3 / Google 4 / Facebook 3), each a
   full even row so no card is ever left stranded. Cards reuse
   the .gs-testimonial styling from style.css untouched; only the
   group heading, the brand avatar and the placeholder marker
   are added here.
   ============================================================ */

.gs-review-group + .gs-review-group {
  margin-top: clamp(2.5rem, 5vw, 3.6rem);
}

.gs-review-group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gs-accent-bright);
  text-align: left;
}

/* Hairline rule that fills the space to the right of the label */
.gs-review-group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(243, 189, 85, 0.45), transparent);
}

.gs-review-group .gs-testimonials-grid {
  margin-top: 1.4rem;
}

/* Fixed column counts so each platform group fills its row exactly */
.gs-testimonials-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.gs-testimonials-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1100px) {
  .gs-testimonials-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .gs-testimonials-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .gs-testimonials-grid--3,
  .gs-testimonials-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Brand avatar: same circle as the old <img>, icon instead of art */
.gs-testimonial-brand {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding: 0;
  font-size: 1.15rem;
  color: var(--gs-accent-bright);
}

.gs-testimonial-info h4 {
  font-size: 1.22rem;
  line-height: 1.2;
  color: var(--gs-dark-heading);
}

/* ---- Placeholder marker ----------------------------------
   Every card still carrying dummy copy shows a SAMPLE chip.
   Removing data-placeholder="true" from a card removes its chip.
   To find all remaining ones:  grep -n 'data-placeholder' about.html
   ---------------------------------------------------------- */
.gs-testimonial[data-placeholder] {
  border-style: dashed;
  border-color: rgba(243, 189, 85, 0.42);
}

/* .gs-testimonial[data-placeholder]::after {
  content: "Sample - replace with a real review";
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(243, 189, 85, 0.5);
  border-radius: 3px;
  background: rgba(139, 0, 0, 0.45);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gs-accent-bright);
  pointer-events: none;
} */

/* The decorative quote mark would collide with the chip */
.gs-testimonial[data-placeholder]::before {
  display: none;
}

/* Font Awesome 6.5.2 and Remixicon 4.1.0 both ship no TripAdvisor mark, so
   those cards use the sections own quote icon; the group heading text is
   what identifies the platform. */

/* Keep quotes on a row aligned when a name or meta line wraps to two lines. */
.gs-review-group .gs-testimonial-info {
  min-height: 3.5rem;
}

/* ============================================================
   CONTACT US — Feedback form
   Embeds the iOrders feedback form beneath the contact details,
   using the same card treatment (border/shadow) as the map embed
   already on this page.
   ============================================================ */

.gs-feedback-section {
  padding: 0 1.5rem clamp(4rem, 8vw, 7rem);
  text-align: center;
}

.gs-feedback-inner {
  max-width: 48rem;
  margin: 0 auto;
}

.gs-feedback-desc {
  max-width: 42rem;
  margin: 0 auto 2.25rem;
  color: var(--gs-text-light);
  font-weight: 300;
  line-height: 1.8;
}

.gs-feedback-embed {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--gs-border-gold);
  box-shadow: var(--gs-shadow);
  min-height: 760px;
}

.gs-feedback-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 760px;
  border: 0;
}

@media (max-width: 640px) {
  .gs-feedback-embed,
  .gs-feedback-embed iframe {
    min-height: 620px;
  }
}

/* ============================================================
   OUR FOOD - dish gallery
   Twenty tiles as an even 4 x 5 block.

   style.css sets this grid to 3 columns with 5:6 portrait cells.
   Twenty items over three columns leaves two stranded on the last
   row, and the 5:6 cell cropped the widest sources (up to 1.34:1)
   by roughly 40% while barely touching the portrait ones - which
   is what made the tiles look inconsistently zoomed.

   Four columns divides twenty exactly, and the tiles are now
   pre-cropped to 1:1 by tools/build-food-gallery.py, so the cell
   ratio matches the file and nothing is cropped twice.
   ============================================================ */

.gs-food-gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.gs-food-gallery-item img {
  aspect-ratio: 1 / 1;
}

/* Every breakpoint keeps a column count that divides 20 evenly, so
   the last row is never short. */
@media (max-width: 1000px) {
  .gs-food-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 560px) {
  /* style.css drops to a single column at 520px; stay at two so the
     grid still divides evenly and the page is not 20 rows tall. */
  .gs-food-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /* The 48px corner sweep swallows a tile this small */
  .gs-food-gallery-item,
  .gs-food-gallery-item:nth-child(even) {
    border-radius: 20px 4px 20px 4px;
  }

  .gs-food-gallery-item:nth-child(even) {
    border-radius: 4px 20px 4px 20px;
  }

  .gs-food-gallery-item::after {
    inset: 6px;
    border-width: 1px;
    border-radius: 15px 3px 15px 3px;
  }

  .gs-food-gallery-item:nth-child(even)::after {
    border-radius: 3px 15px 3px 15px;
  }
}

/* ============================================================
   BUTTONS — Reference pill, site-wide

   The home hero's "See Menu" / "Order Online" pills are the house
   button style. home.css builds them (.gs-ref-pill) but scopes them
   to `.gs-home`, so every other page was still showing the shared
   library's gold serif button. This section carries that same pill
   to the rest of the site.

     white fill · 2px near-black rule · Lobster script · full round
     hover -> deep red fill, white lettering, slight lift

   White-on-anything is the point: the navbar, heroes and CTA panels
   are all deep red, and the pill reads cleanly on those as well as
   on the parchment sections, so one treatment covers both.

   Lobster is loaded per page in the <head>; it was previously
   fetched by index.html alone.
   ============================================================ */

:root {
  --gs-pill-ink: #0c0c0c;   /* matches home.css --ref-ink */
  --gs-pill-red: #8b0000;   /* matches home.css --ref-red */
}

.btn,
.gs-btn,
.gs-btn-primary,
.gs-btn-outline,
.cs-button-solid,
.location-card-btn,
.location-card-btn-primary,
.btn-directions,
.menu-btn-wrapper a {
  font-family: 'Lobster', 'Cormorant Garamond', cursive;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1;
  background: #fff;
  border: 2px solid var(--gs-pill-ink);
  border-radius: 999px;
  color: var(--gs-pill-ink);
  padding: 0.6em 1.6em;
  box-shadow: none;
}

/* The library sweeps a gold sheen across the solid button on hover.
   There is no gold left to sweep — drop it. */
.btn::before,
.gs-btn-primary::before,
.cs-button-solid::before {
  display: none;
}

.btn:hover,
.gs-btn:hover,
.gs-btn-primary:hover,
.gs-btn-outline:hover,
.cs-button-solid:hover,
.location-card-btn:hover,
.location-card-btn-primary:hover,
.btn-directions:hover,
.menu-btn-wrapper a:hover,
.gs-location-cta .gs-btn-outline:hover,
.gs-map-info .gs-btn-outline:hover,
.cta__container .gs-btn-outline:hover {
  background: var(--gs-pill-red);
  border-color: var(--gs-pill-red);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(139, 0, 0, 0.26);
}

/* Outline buttons sitting on the deep-red panels — style.css gives
   them a washed-out border there; they are pills like the rest. */
.gs-location-cta .gs-btn-outline,
.gs-map-info .gs-btn-outline,
.cta__container .gs-btn-outline,
.footer .gs-btn-outline {
  border-color: var(--gs-pill-ink);
  color: var(--gs-pill-ink);
}

/* Nav bar order button — the pill, sized down to sit on the header */
.nav__btn .btn,
.nav__links .nav__btn-mobile .btn {
  font-size: 1.05rem;
  padding: 0.5em 1.5em;
}

/* Floating order pill — already round; match the rest */
.gs-floating-btn a {
  font-family: 'Lobster', 'Cormorant Garamond', cursive;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: none;
  background: #fff;
  border: 2px solid var(--gs-pill-ink);
  color: var(--gs-pill-ink);
}

.gs-floating-btn a:hover {
  background: var(--gs-pill-red);
  border-color: var(--gs-pill-red);
  color: #fff;
}

/* Dish-carousel arrows (mobile only). No display property here —
   style.css keeps them hidden above 768px. */
.gs-dishes-nav {
  border-color: var(--gs-pill-ink);
  color: var(--gs-pill-ink);
}

.gs-dishes-nav:active {
  background: var(--gs-pill-red);
  color: #fff;
}