/**
 * Jeju Snow Salmon — Summer Light Mode Tokens (Milestone 2 extension)
 * Issue: DIG-102 · Parent: DIG-101 · Epic: DIG-61
 * Owner: UI/UX & Creative Lead
 *
 * Usage: Load AFTER summer-m1/summer-tokens.css (or summer-m1.css merge).
 * Reuses M1 :root tokens — no new palette architecture.
 * Static-first: no build step required.
 */

/* ── Story ──────────────────────────────────────────────── */
.summer-mode .v2-story__copy h2 {
  color: var(--summer-ink);
}

.summer-mode .v2-story__copy .lead,
.summer-mode .v2-story__copy p {
  color: var(--summer-stone);
}

.summer-mode .v2-story__quote {
  color: var(--summer-ink);
  border-left: 3px solid var(--summer-coastal);
  background: transparent;
}

.summer-mode .v2-story__quote cite {
  color: var(--summer-stone);
}

.summer-mode .v2-story__mosaic-main,
.summer-mode .v2-story__mosaic-a,
.summer-mode .v2-story__mosaic-b {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
}

.summer-mode .v2-story__mosaic img {
  filter: brightness(1.05) saturate(1.05);
}

/* Prefer outline CTA in story — demote dark primary */
.summer-mode .v2-story__cta.btn--dark {
  color: var(--summer-ink);
  background: transparent;
  border: 1px solid var(--summer-ink);
}

.summer-mode .v2-story__cta.btn--dark:hover {
  background: var(--summer-sand);
}

/* ── Discover ───────────────────────────────────────────── */
.summer-mode .v2-discover {
  background: var(--summer-cream);
}

.summer-mode .v2-discover__header h2,
.summer-mode .v2-discover__header p {
  color: var(--summer-ink);
}

.summer-mode .v2-discover__header p {
  color: var(--summer-stone);
}

.summer-mode .v2-featured-card,
.summer-mode .v2-content-card {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  border-radius: 14px;
  overflow: hidden;
}

.summer-mode .v2-featured-card:hover,
.summer-mode .v2-content-card:hover {
  box-shadow: var(--summer-shadow-lg);
}

.summer-mode .v2-featured-card__category,
.summer-mode .v2-content-card__category {
  color: var(--summer-coastal);
}

.summer-mode .v2-featured-card__title,
.summer-mode .v2-content-card__title {
  color: var(--summer-ink);
  font-family: var(--serif);
}

.summer-mode .v2-featured-card__desc,
.summer-mode .v2-content-card__desc {
  color: var(--summer-stone);
}

.summer-mode .v2-featured-card__link,
.summer-mode .v2-content-card__link {
  color: var(--summer-salmon);
}

.summer-mode .v2-discover__loading {
  color: var(--summer-stone);
}

/* ── Reviews (claim-soft presentation) ──────────────────── */
.summer-mode .hpg-reviews {
  background: var(--summer-warm-white);
}

.summer-mode .hpg-reviews__header h2 {
  color: var(--summer-ink);
}

.summer-mode .hpg-reviews__header p {
  color: var(--summer-stone);
}

.summer-mode .hpg-reviews__trust-bar {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  border-radius: 14px;
}

.summer-mode .hpg-reviews__score-num {
  /* Soften numeric amplification — hide count; Content replaces copy */
  display: none;
}

.summer-mode .hpg-reviews__score-sub,
.summer-mode .hpg-badge-sub {
  /* Hide review-count amplification pending DIG-103 */
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.summer-mode .hpg-reviews__score-sub::after,
.summer-mode .hpg-badge-sub::after {
  content: "Google Reviews";
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--summer-stone);
}

.summer-mode .hpg-stars-lg {
  color: var(--summer-gold);
}

.summer-mode .hpg-pill {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-sand);
  color: var(--summer-stone);
}

.summer-mode .hpg-pill.is-active {
  background: var(--summer-grove-soft);
  border-color: var(--summer-grove);
  color: var(--summer-ink);
}

.summer-mode .hpg-reviews__track > *,
.summer-mode .hpg-review-card {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  color: var(--summer-ink);
}

/* ── Visit / Location ───────────────────────────────────── */
.summer-mode .v2-visit__right {
  background: var(--summer-cream);
}

.summer-mode .v2-visit__reserve-cta h2,
.summer-mode .v2-visit__delivery h3 {
  color: var(--summer-ink);
}

.summer-mode .v2-visit__reserve-cta > p,
.summer-mode .v2-visit__delivery p {
  color: var(--summer-stone);
}

.summer-mode .v2-visit__chips span,
.summer-mode .v2-visit__delivery .chip-row span {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  color: var(--summer-ink);
}

.summer-mode .v2-visit__delivery {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  border-radius: 14px;
  padding: var(--space-md);
}

/* Maps secondary on photo: light outline (Frontend may add .btn--ghost-light) */
.summer-mode .v2-visit__location .btn--dark {
  color: var(--summer-warm-white);
  background: transparent;
  border: 1px solid rgba(253, 251, 247, 0.85);
}

.summer-mode .v2-visit__location .btn--dark:hover {
  background: rgba(253, 251, 247, 0.12);
}

/* Overlays / modals */
.summer-mode .location-overlay__scrim,
.summer-mode .keeta-modal__scrim {
  background: rgba(61, 56, 52, 0.45);
}

.summer-mode .location-panel,
.summer-mode .keeta-modal__panel {
  background: var(--summer-warm-white);
  color: var(--summer-ink);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow-lg);
}

.summer-mode .location-panel__close,
.summer-mode .keeta-modal__close {
  color: var(--summer-ink);
}

.summer-mode .location-panel__subtitle,
.summer-mode .location-panel__block span {
  color: var(--summer-stone);
}

.summer-mode .location-panel__block strong,
.summer-mode .location-panel__block a {
  color: var(--summer-ink);
}

.summer-mode .location-panel__block a:hover {
  color: var(--summer-coastal);
}

.summer-mode .location-panel__highlights span {
  background: var(--summer-cream);
  border: 1px solid var(--summer-line);
  color: var(--summer-ink);
}

/* ── Reservation ────────────────────────────────────────── */
.summer-mode .v2-reservation-section,
.summer-mode .reservation-section {
  background: var(--summer-cream);
}

.summer-mode .reservation-card {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow-lg);
  border-radius: 16px;
}

.summer-mode .reservation-card h2 {
  color: var(--summer-ink);
}

.summer-mode .reservation-card > div > p {
  color: var(--summer-stone);
}

.summer-mode .reservation-form label span {
  color: var(--summer-stone);
}

.summer-mode .reservation-form input,
.summer-mode .reservation-form textarea {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  color: var(--summer-ink);
}

.summer-mode .reservation-form input:focus,
.summer-mode .reservation-form textarea:focus {
  outline: 2px solid var(--summer-coastal);
  outline-offset: 2px;
  border-color: var(--summer-coastal);
}

.summer-mode .reservation-details article {
  background: var(--summer-sand);
  border: 1px solid var(--summer-line);
  border-radius: 12px;
  color: var(--summer-ink);
}

.summer-mode .reservation-details article span {
  color: var(--summer-stone);
}

.summer-mode .reservation-details article a {
  color: var(--summer-coastal);
}

/* ── SEO cards / FAQ ────────────────────────────────────── */
.summer-mode .seo-section {
  background: var(--summer-warm-white);
}

.summer-mode .seo-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-left: 3px solid var(--summer-sand);
  padding-left: var(--space-md);
}

.summer-mode .seo-card h2 {
  color: var(--summer-ink);
  font-family: var(--serif);
}

.summer-mode .seo-card p {
  color: var(--summer-stone);
}

.summer-mode .seo-section details,
.summer-mode .seo-section .faq-item {
  border: 1px solid var(--summer-line);
  background: var(--summer-warm-white);
  border-radius: 10px;
}

.summer-mode .seo-section details[open],
.summer-mode .seo-section .faq-item.is-open {
  background: var(--summer-cream);
}

.summer-mode .seo-section summary,
.summer-mode .seo-section .faq-q {
  color: var(--summer-ink);
}

.summer-mode .seo-section .faq-a,
.summer-mode .seo-section details p {
  color: var(--summer-stone);
}

/* ── Visual story bands ─────────────────────────────────── */
.summer-mode .vs-story {
  background: var(--summer-warm-white);
}

.summer-mode .vs-story--alt {
  background: var(--summer-cream);
}

.summer-mode .vs-story__eyebrow {
  color: var(--summer-grove);
}

.summer-mode .vs-story[aria-label="Family Dining at The Pearl"] .vs-story__eyebrow {
  color: var(--summer-coastal);
}

.summer-mode .vs-story[aria-label="Fresh Salmon Daily"] .vs-story__eyebrow {
  color: var(--summer-salmon);
}

.summer-mode .vs-story__heading,
.summer-mode .vs-collection__heading {
  color: var(--summer-ink);
  font-family: var(--serif);
}

.summer-mode .vs-story__lead,
.summer-mode .vs-collection__lead {
  color: var(--summer-stone);
}

.summer-mode .vs-story__bullets li {
  color: var(--summer-ink);
}

.summer-mode .vs-story__figure {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--summer-shadow);
  border: 1px solid var(--summer-line);
}

.summer-mode .vs-story__figure img {
  filter: brightness(1.05) saturate(1.04);
}

/* Demote non-booking dark CTAs to outline */
.summer-mode .vs-story__cta.btn--dark {
  color: var(--summer-ink);
  background: transparent;
  border: 1px solid var(--summer-ink);
}

.summer-mode .vs-story[aria-label="Family Dining at The Pearl"] .vs-story__cta.btn--dark {
  color: var(--summer-ink);
  background: linear-gradient(135deg, var(--summer-gold-soft), var(--summer-gold) 58%, var(--summer-gold-dark));
  border: 1px solid var(--summer-gold-dark);
}

/* ── Salmon collection ──────────────────────────────────── */
.summer-mode .vs-collection {
  background: var(--summer-cream);
}

.summer-mode .vs-collection__card {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.summer-mode .vs-collection__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--summer-salmon);
  border-radius: 14px 0 0 14px;
}

.summer-mode .vs-collection__card h3,
.summer-mode .vs-collection__card .vs-collection__title {
  color: var(--summer-ink);
  font-family: var(--serif);
}

.summer-mode .vs-collection__card p {
  color: var(--summer-stone);
}

.summer-mode .vs-collection__card a {
  color: var(--summer-coastal);
}

/* ── Guest resources ────────────────────────────────────── */
.summer-mode .guest-res {
  background: var(--summer-cream);
}

.summer-mode .guest-res__card {
  background: var(--summer-warm-white);
  border: 1px solid var(--summer-line);
  box-shadow: var(--summer-shadow);
  border-radius: 14px;
}

.summer-mode .guest-res__card-title {
  color: var(--summer-ink);
}

.summer-mode .guest-res__card-desc {
  color: var(--summer-stone);
}

.summer-mode .guest-res__btn--disabled {
  background: var(--summer-sand);
  color: var(--summer-stone);
  border: 1px solid var(--summer-line);
}

/* ── Footer (selective night band) ──────────────────────── */
.summer-mode .v2-footer-outer {
  background: var(--summer-night);
  color: var(--summer-warm-white);
}

.summer-mode .v2-footer__brand strong {
  color: var(--summer-warm-white);
  font-family: var(--serif);
}

.summer-mode .v2-footer__brand p,
.summer-mode .v2-footer__brand .footer-seo {
  color: rgba(253, 251, 247, 0.72);
}

.summer-mode .v2-footer__col h4 {
  color: var(--summer-sand);
  letter-spacing: 0.06em;
}

.summer-mode .v2-footer__col a {
  color: rgba(253, 251, 247, 0.78);
}

.summer-mode .v2-footer__col a:hover {
  color: var(--summer-gold-soft);
}

.summer-mode .v2-footer__hours {
  color: rgba(253, 251, 247, 0.65);
}

.summer-mode .v2-footer__bottom {
  background: #1f1c19;
  border-top: 1px solid rgba(253, 251, 247, 0.08);
}

.summer-mode .v2-footer__bottom p,
.summer-mode .v2-footer__bottom a {
  color: rgba(253, 251, 247, 0.35) !important;
}

.summer-mode .dce-footer__social-link {
  color: rgba(253, 251, 247, 0.78);
}

/* ── Mobile full-page CTA / spacing ─────────────────────── */
@media (max-width: 768px) {
  .summer-mode #story,
  .summer-mode #discover,
  .summer-mode #reviews,
  .summer-mode #reservation,
  .summer-mode .vs-story,
  .summer-mode .vs-collection,
  .summer-mode .guest-res,
  .summer-mode .seo-section {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    padding-left: max(20px, var(--space-md));
    padding-right: max(20px, var(--space-md));
  }

  .summer-mode .v2-story__cta,
  .summer-mode .v2-visit__reserve-cta .btn,
  .summer-mode .v2-visit__delivery .btn,
  .summer-mode .reservation-form .submit-btn,
  .summer-mode .vs-story__cta {
    width: 100%;
    min-height: 48px;
    text-align: center;
  }

  .summer-mode .v2-visit {
    grid-template-columns: 1fr;
  }

  .summer-mode .v2-visit__location,
  .summer-mode .v2-visit__location .location-section,
  .summer-mode .v2-visit__location .image-panel--pearl {
    min-height: 280px;
  }

  .summer-mode .hpg-reviews__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .summer-mode .v2-footer {
    padding: var(--space-xl) var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .summer-mode .hpg-reviews__track,
  .summer-mode .vs-animate {
    animation: none !important;
    transition: none !important;
  }
}