/* ===== HEADER ===== */
.eat-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e60000;
  margin-bottom: 8px;
}

.eat-title {
  font-size: 34px;
  font-weight: 900;
  color: #111;
  line-height: 1.1;
  margin-bottom: 8px;
}

.eat-subtitle {
  font-size: 15px;
  color: #555;
  line-height: 1.7;
  margin-bottom: 36px;
}

/* ===== AREA TABS (match hotel filters size) ===== */
.eat-area-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ececec;
  margin-bottom: 48px;
}

 .eat-area-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #767676;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
  margin-bottom: -1px;
}

.eat-area-tab:hover {
  color: #e60000;
}

.eat-area-tab.active {
  color: #e60000;
  border-bottom-color: #e60000;
}

/* ===== PANELS ===== */
.eat-panel {
  display: none;
}

.eat-panel.active {
  display: block;
}

/* ===== INTRO ===== */
.eat-area-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;

  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #ececec;
}

.eat-area-intro-img {
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 16/10;
   position: relative; 
}

.eat-area-intro-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;  /* ← add this */
  display: block;  /* ← add this */
}

.eat-area-name {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 14px;
}

.eat-area-desc {
  font-size: 16px;
  line-height: 1.85;
  color: #444;
}

/* ===== GRID ===== */
.eat-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid #ececec;
}

/* ===== CARD ===== */
.eat-list-item {
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: 26px 0 30px;
  border-top: 1px solid #ececec;
}

/* layout spacing */
.eat-list-item:nth-child(-n+2) {
  border-top: none;
}

.eat-list-item:nth-child(odd) {
  padding-right: 32px;
  border-right: 1px solid #ececec;
}

.eat-list-item:nth-child(even) {
  padding-left: 32px;
}

/* ===== IMAGE (FIXED SYSTEM LIKE HOTEL) ===== */
.eat-list-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
}

.eat-list-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* REMOVE ZOOM */
.eat-list-item:hover .eat-list-img img {
  transform: none;
}

/* ===== TEXT ===== */
.eat-list-name {
  font-size: 20px;
  font-weight: 900;
}

.eat-list-japanese {
  font-size: 13.5px;
  color: #767676;
  margin-bottom: 9px;
}

.eat-list-desc {
  font-size: 15.5px;
  color: #555;
  line-height: 1.85;
}

.eat-list-where {
  font-size: 13px;
  color: #737373;
  display: flex;
  gap: 6px;
}

.eat-list-where i {
  color: #e60000;
}

/* ===== SECTION LABEL ===== */
.eat-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e60000;

  margin: 48px 0 20px;

  display: flex;
  align-items: center;
  gap: 12px;
}

.eat-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #ececec;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 800px) {
  .eat-area-intro {
    grid-template-columns: 1fr;
  }

  .eat-list-grid {
    grid-template-columns: 1fr;
  }

  .eat-list-item:nth-child(odd) {
    padding-right: 0;
    border-right: none;
  }

  .eat-list-item:nth-child(even) {
    padding-left: 0;
  }
}

/* ════ KEEP TWO COLUMNS IN LANDSCAPE ════
   Same width-only trap as the hotel grid: everything collapses at 800px,
   which is landscape-phone territory. The intro and the venue grid go back
   to two columns, and the odd/even gutters and divider come back with them —
   the 800 block strips those, and two columns without them collide. */
@media (max-height: 500px) {
  .eat-area-intro {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }

  .eat-list-grid {
    grid-template-columns: 1fr 1fr;
  }

  .eat-list-item:nth-child(odd) {
    padding-right: 32px;
    border-right: 1px solid #ececec;
  }

  .eat-list-item:nth-child(even) {
    padding-left: 32px;
  }
}


/* ========================================================================
   Broken-image fallback
   Both food images sit in a fixed-ratio tile. When a src 404s the tile
   collapsed to a broken icon plus raw alt text on a bare background. A
   tinted tile and transparent alt colour make a dead image read as a
   neutral block instead.
   ======================================================================== */
.eat-area-intro-img,
.eat-list-img {
  background: #efeae5;
}

.eat-area-intro-img img,
.eat-list-img img {
  color: transparent;
}


/* ========================================================================
   MOBILE  —  area tab strip
   Tab strip scrolls sideways on mobile. It carried flex-wrap: wrap, so on
   a phone the tabs broke into ragged rows and the underline tab style
   stopped reading as tabs. One row that scrolls instead, with the next tab
   clipped at the right edge as the cue. Paired with the .tabstrip cue CSS
   and the strip script, both of which live in e-duplicate_destinations_main.
   ======================================================================== */
@media (max-width: 760px) {
  .eat-area-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-bottom: 30px;
  }

  .eat-area-tabs::-webkit-scrollbar {
    display: none;
  }

  .eat-area-tab {
    flex: 0 0 auto;
    font-size: 15px;
    padding: 10px 15px;
  }

  .eat-area-tab:first-child {
    padding-left: 0;
  }

  .eat-area-tab:last-child {
    padding-right: 0;
  }

  .eat-subtitle {
    margin-bottom: 26px;
  }
}


/* ========================================================================
   MOBILE  —  food card rows aligned
   ======================================================================== */
@supports (grid-template-rows: subgrid) {
    .eat-list-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: 0;
    }

    .eat-list-body {
        margin-bottom: 12px;
    }

    .eat-list-img {
        margin-bottom: 12px;
    }
}