/* ============================================================
   Wagg N Dine — Gallery & Testimonials sections
   Brand: heading #733711 (Mouse Memoirs), body Aleo,
   active #7b4a23, cream #fff5d2, testimonial bg #fff3cb, card #f0e6da
   ============================================================ */

:root {
  --wnd-brown: #733711;
  --wnd-copper: #7b4a23;
  --wnd-cream: #fff5d2;
  --wnd-testi-bg: #fff3cb;
  --wnd-card: #f0e6da;
  --wnd-heading-font: 'MouseMemoirs', sans-serif;
  --wnd-body-font: 'Aleo', serif;
}

/* ---------- shared ---------- */
.wnd-section { width: 100%; padding: 80px 0; position: relative; }
.wnd-container { max-width: 1728px; margin: 0 auto; padding: 0 100px; }
.wnd-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
}
.wnd-title {
  font-family: var(--wnd-heading-font);
  color: var(--wnd-brown);
  font-size: 64px; line-height: 1; margin: 0;
}
.wnd-tabs { display: flex; gap: 16px; align-items: center; }
.wnd-tab {
  font-family: var(--wnd-heading-font);
  font-size: 26px; line-height: 1.159; text-align: center;
  padding: 14px 30px; border-radius: 6px; cursor: pointer;
  border: 3px solid var(--wnd-copper); background: transparent;
  color: var(--wnd-copper); transition: all .2s ease; min-width: 118px;
}
.wnd-tab.is-active { background: var(--wnd-copper); color: #fff; }

/* progress / scroll indicator */
.wnd-progress {
  width: 314px; max-width: 80%; height: 10px; border-radius: 20px;
  background: #d9d9d9; margin: 48px auto 0; overflow: hidden; position: relative;
}
.wnd-progress-fill {
  height: 100%; border-radius: 20px; background: var(--wnd-brown);
  width: 50%; transition: width .3s ease, left .3s ease; position: absolute; left: 0; top: 0;
}

/* ---------- GALLERY ---------- */
.wnd-gallery { background: #fff; overflow: hidden; }
.wnd-gallery-inner { position: relative; }
.wnd-gallery-backdrop {
  position: relative;
  background: var(--wnd-cream);
  border: 6px solid var(--wnd-copper);
  border-radius: 60px;
  padding: 90px 60px 60px;
  margin-top: 120px;         /* room for the dog peeking over the top */
}
/* dog peeking over the top-center */
.wnd-gallery-dog {
  position: absolute; top: -224px; left: 50%; transform: translateX(-50%);
  width: 448px; height: 448px; object-fit: contain; pointer-events: none; z-index: 2;
}
.wnd-gallery-strip {
  display: flex; gap: 16px; align-items: center;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  padding-bottom: 8px; scrollbar-width: none;
}
.wnd-gallery-strip::-webkit-scrollbar { display: none; }
.wnd-gallery-item {
  flex: 0 0 auto; width: 460px; height: 460px; border-radius: 26px;
  overflow: hidden; position: relative; background: #eee;
}
.wnd-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* ---------- TESTIMONIALS ---------- */
.wnd-testimonials { background: var(--wnd-testi-bg); }
.wnd-testi-card {
  background: var(--wnd-card); border-radius: 66px; position: relative;
  overflow: hidden; padding: 66px; min-height: 620px;
  display: flex; align-items: center;
}
.wnd-testi-paw {
  position: absolute; left: -56px; top: 150px; width: 445px; height: 423px;
  transform: rotate(12.58deg); opacity: .5; pointer-events: none;
}
.wnd-testi-body {
  display: flex; gap: 60px; align-items: center; position: relative; z-index: 1;
  width: 100%; justify-content: center; flex-wrap: wrap;
}
.wnd-testi-photo {
  flex: 0 0 auto; width: 423px; height: 554px; border-radius: 24px;
  overflow: hidden; background: #ddd;
}
.wnd-testi-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wnd-testi-content { flex: 1 1 420px; max-width: 470px; color: #1c1c1c; }
.wnd-testi-name { font-family: var(--wnd-heading-font); font-size: 40px; margin: 0 0 8px; }
.wnd-testi-sub { font-family: var(--wnd-body-font); font-size: 20px; margin: 0 0 26px; }
.wnd-testi-quote { font-family: var(--wnd-body-font); font-size: 26px; line-height: 1.4; margin: 0 0 40px; }
.wnd-stars { display: flex; gap: 6px; }
.wnd-star { width: 34px; height: 34px; color: #f5a623; font-size: 34px; line-height: 1; }
.wnd-viewall {
  position: absolute; right: 60px; bottom: 44px;
  background: var(--wnd-brown); color: #fff; border: none; cursor: pointer;
  font-family: var(--wnd-heading-font); font-size: 30px;
  padding: 14px 30px; border-radius: 6px;
}

/* empty state (Videos tab) */
.wnd-empty {
  text-align: center; font-family: var(--wnd-body-font); color: var(--wnd-copper);
  font-size: 22px; padding: 120px 20px;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .wnd-container { padding: 0 24px; }
  .wnd-title { font-size: 44px; }
  .wnd-gallery-item { width: 300px; height: 300px; }
  .wnd-testi-card { padding: 40px; }
  .wnd-testi-photo { width: 300px; height: 400px; }
  .wnd-viewall { position: static; margin-top: 24px; }
  .wnd-testi-content { text-align: center; }
  .wnd-stars { justify-content: center; }
}
@media (max-width: 600px) {
  .wnd-section { padding: 48px 0; }
  .wnd-title { font-size: 34px; }
  .wnd-tab { font-size: 20px; padding: 10px 20px; min-width: 90px; }
  .wnd-gallery-backdrop { border-radius: 32px; padding: 70px 20px 30px; margin-top: 90px; }
  .wnd-gallery-dog { width: 300px; height: 300px; top: -150px; }
  .wnd-gallery-item { width: 240px; height: 240px; }
  .wnd-testi-name { font-size: 30px; }
  .wnd-testi-quote { font-size: 20px; }
}

/* Hero: remove old baked-in banner art (dog) so the new chef cutout sits on clean cream */
#Banner {
  background-image: none !important;
  background-color: #fdf3e7 !important;
}

/* Testimonials: fix hidden View All button on mobile */
@media (max-width: 1100px) {
  .wnd-testi-card { display: block; overflow: visible; }
  .wnd-testi-body { flex-direction: column; }
  .wnd-viewall {
    position: static !important;
    display: block;
    margin: 24px auto 0 !important;
    right: auto !important;
    bottom: auto !important;
  }
}