/**
 * styles.css: Mobile-first editorial system for the Nikiti catalogue.
 * Sections: tokens, foundation, header, route origin, tabs, filters,
 * catalogue cards, galleries, footer, responsive and motion rules.
 */

/* ============================================================
   Design tokens
   Design intent: Pair sun-warmed paper with deep Aegean ink and coral accents.
   ============================================================ */

:root {
  /* Canvas — warm, low-glare page background. */
  --color-canvas: #f5efe2;
  /* Paper — primary reading and card surface. */
  --color-paper: #fffaf0;
  /* Paper muted — subtle control and fallback surface. */
  --color-paper-muted: #ece4d5;
  /* Ink — primary copy with strong contrast on paper. */
  --color-ink: #17383c;
  /* Ink muted — secondary metadata with accessible contrast. */
  --color-ink-muted: #526467;
  /* Sea — primary interactive and structural color. */
  --color-sea: #0f5b66;
  /* Sea deep — active navigation and dark footer surface. */
  --color-sea-deep: #093d46;
  /* Sea pale — calm informational panel surface. */
  --color-sea-pale: #dbe9e5;
  /* Coral — warm identity accent and food marker. */
  --color-coral: #c95037;
  /* Coral deep — readable link color on light surfaces. */
  --color-coral-deep: #86331f;
  /* Sand — evidence and detail surface. */
  --color-sand: #e5cfaa;
  /* White — copy and icons on dark surfaces. */
  --color-white: #ffffff;
  /* Border — quiet division between content units. */
  --color-border: #b9b09f;
  /* Focus — conspicuous keyboard focus against light and dark areas. */
  --color-focus: #ffbf47;
  /* Shadow — restrained card lift. */
  --color-shadow: rgba(23, 56, 60, 0.14);

  /* Extra-small type — source credits and status labels. */
  --font-size-xs: 0.78rem;
  /* Small type — metadata, controls, and compact navigation. */
  --font-size-sm: 0.9rem;
  /* Base type — body reading at phone and desktop widths. */
  --font-size-base: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  /* Card title — distinct without overtaking section hierarchy. */
  --font-size-md: clamp(1.28rem, 1.17rem + 0.45vw, 1.65rem);
  /* Section heading — catalogue-level wayfinding. */
  --font-size-lg: clamp(2.1rem, 1.72rem + 1.8vw, 3.7rem);
  /* Hairline spacing — compact label separation. */
  --space-1: 0.35rem;
  /* Small spacing — inline groups and metadata. */
  --space-2: 0.65rem;
  /* Control spacing — comfortable touch-target interior. */
  --space-3: 1rem;
  /* Component spacing — card and panel interior. */
  --space-4: 1.5rem;
  /* Group spacing — related component separation. */
  --space-5: 2.25rem;
  /* Section spacing — major content rhythm. */
  --space-6: 3.5rem;
  /* Page spacing — fluid separation between page landmarks. */
  --space-7: clamp(4.5rem, 8vw, 8rem);

  /* Small radius — tags and compact controls. */
  --radius-sm: 0.35rem;
  /* Medium radius — cards and input controls. */
  --radius-md: 0.85rem;
  /* Reading width — keeps explanatory text comfortable. */
  --reading-width: 68ch;
  /* Canvas width — limits wide-screen line and grid expansion. */
  --content-width: 80rem;
  /* Control height — exceeds the 44px accessible touch target. */
  --control-height: 2.9rem;
}

/* ============================================================
   Foundation and accessibility
   Design intent: Source order stays useful before enhancement and at 320px.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
dl,
figure {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: inherit;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.04;
  text-wrap: balance;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-lg);
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-md);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select {
  font: inherit;
}

button,
select {
  cursor: pointer;
}

a {
  color: var(--color-coral-deep);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.17em;
}

/* Hover state: warm links deepen without shifting their geometry. */
a:hover {
  color: var(--color-coral);
}

/* Keyboard focus state: a high-contrast ring remains visible on every surface. */
:focus-visible {
  outline: 0.22rem solid var(--color-focus);
  outline-offset: 0.2rem;
}

[id] {
  scroll-margin-top: 9rem;
}

[hidden] {
  display: none !important;
}

/* Screen-reader-only heading: preserves document hierarchy without adding visual introduction content. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.shell {
  width: min(calc(100% - (2 * var(--space-3))), var(--content-width));
  margin-inline: auto;
}

.section-heading {
  max-width: var(--reading-width);
  margin-bottom: var(--space-5);
}

.section-heading--compact {
  margin-bottom: var(--space-4);
}

.section-heading > p:last-child {
  margin-bottom: 0;
  color: var(--color-ink-muted);
}

.eyebrow {
  margin-bottom: var(--space-2);
  color: var(--color-coral-deep);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.35;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  /* Skip-link layer: always above the sticky catalogue tabs. */
  z-index: 50;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-sea-deep);
  color: var(--color-white);
  font-weight: 700;
  transform: translateY(-180%);
}

/* Keyboard focus state: reveal the otherwise off-canvas skip link. */
.skip-link:focus {
  color: var(--color-white);
  transform: translateY(0);
}

/* ============================================================
   Site header
   Design intent: Keep portfolio provenance visible without delaying the catalogue tabs.
   ============================================================ */

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper);
}

.site-header__inner {
  display: grid;
  gap: var(--space-1) var(--space-3);
  align-items: center;
  min-height: 4.6rem;
  padding-block: var(--space-2);
}

.back-link {
  width: fit-content;
  min-height: 2.75rem;
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  color: var(--color-sea-deep);
  font-weight: 800;
}

.site-header__place {
  margin-bottom: 0;
}

.site-header__place {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

/* ============================================================
   Fixed route origin
   Design intent: Make the villa and snapshot boundary visible before the tabs.
   ============================================================ */

.origin-strip {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-sand);
}

.origin-strip__inner {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}

.origin-strip h2 {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-md);
}

.origin-strip p:last-child {
  margin-bottom: 0;
}

.origin-strip .record-link {
  width: fit-content;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Catalogue tabs
   Design intent: Five stable decisions remain reachable by thumb and keyboard.
   ============================================================ */

.catalogue-tabs {
  position: sticky;
  /* Sticky navigation layer: above cards, below the skip link. */
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-paper) 95%, transparent);
  box-shadow: 0 0.3rem 1rem var(--color-shadow);
  backdrop-filter: blur(0.6rem);
}

.catalogue-tabs__scroll {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding-block: var(--space-2);
}

.catalogue-tab {
  flex: 1 1 auto;
  min-height: var(--control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--color-sea-deep);
  font-size: var(--font-size-sm);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* Hover state: preview the selectable tab with a quiet sea tint. */
.catalogue-tab:hover {
  background: var(--color-sea-pale);
  color: var(--color-sea-deep);
}

/* Active state: a filled surface communicates the selected catalogue. */
.catalogue-tab.is-active {
  background: var(--color-sea);
  color: var(--color-white);
}

/* ============================================================
   Progressive filters
   Design intent: One compact control surface changes with the active catalogue.
   ============================================================ */

.filter-section {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-paper);
}

.catalogue-filters {
  display: grid;
  gap: var(--space-3);
  align-items: end;
}

.filter-field {
  display: grid;
  gap: var(--space-1);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.filter-field input,
.filter-field select {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  letter-spacing: normal;
}

.filter-reset {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-sea);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-sea-deep);
  font-weight: 800;
}

/* Hover state: fill secondary controls while retaining their label contrast. */
.filter-reset:hover {
  background: var(--color-sea-pale);
}

.result-status,
.noscript-note {
  margin: var(--space-3) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.noscript-note {
  padding: var(--space-3);
  border-left: 0.3rem solid var(--color-coral);
  background: var(--color-paper-muted);
}

/* ============================================================
   Catalogue panels and record cards
   Design intent: Dense factual records scan cleanly without looking clinical.
   ============================================================ */

.catalogue-panel {
  padding-block: var(--space-7);
}

.catalogue-panel--food,
.catalogue-panel--sights {
  background: var(--color-canvas);
}

.catalogue-panel--restaurants,
.catalogue-panel--beaches {
  background: var(--color-sea-pale);
}

.catalogue-panel--fish {
  background: var(--color-paper-muted);
}

.catalogue-grid {
  display: grid;
  gap: var(--space-4);
}

.fallback-list article,
.record-card {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  box-shadow: 0 0.4rem 1.2rem var(--color-shadow);
}

.fallback-list article {
  padding: var(--space-4);
}

.fallback-list article p:last-child {
  margin-bottom: 0;
  color: var(--color-ink-muted);
}

.record-card {
  display: grid;
  overflow: clip;
}

.record-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-4);
}

.record-card__header {
  margin-bottom: var(--space-3);
}

.record-card__badge {
  display: inline-block;
  margin-bottom: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  background: var(--color-sea-pale);
  color: var(--color-sea-deep);
  font-size: var(--font-size-xs);
  font-weight: 800;
  line-height: 1.3;
}

.record-card__title {
  margin-bottom: 0;
}

.record-status {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.record-status--confirmed {
  background: var(--color-sea-pale);
  color: var(--color-sea-deep);
}

.record-status--unconfirmed {
  background: color-mix(in srgb, var(--color-sand) 65%, var(--color-paper));
  color: var(--color-coral-deep);
}

.record-card__greek {
  margin-bottom: var(--space-2);
  color: var(--color-coral-deep);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  font-weight: 700;
}

.record-card__description,
.record-card__meta,
.record-card__route {
  margin-bottom: var(--space-3);
}

.record-card__meta {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.record-card__route {
  padding: var(--space-2) var(--space-3);
  border-left: 0.3rem solid var(--color-sea);
  background: var(--color-sea-pale);
  color: var(--color-sea-deep);
  font-size: var(--font-size-sm);
  font-weight: 800;
}

.price-missing,
.record-menu {
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.offer-list {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding-left: 1.25rem;
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin-block: var(--space-2) var(--space-3);
}

.record-link {
  font-weight: 800;
}

.rating-row {
  margin-bottom: var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.rating-row__label {
  color: var(--color-ink);
}

.record-details {
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.record-details__summary {
  width: fit-content;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  color: var(--color-sea-deep);
  font-weight: 800;
  cursor: pointer;
}

.record-detail {
  display: grid;
  grid-template-columns: minmax(5.7rem, 0.38fr) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin-block: var(--space-3);
  font-size: var(--font-size-sm);
}

.record-detail__term {
  color: var(--color-ink-muted);
  font-weight: 800;
}

.record-detail__value {
  margin: 0;
}

.record-sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--font-size-xs);
}

.specific-warning {
  padding: var(--space-3);
  border-left: 0.3rem solid var(--color-coral);
  background: color-mix(in srgb, var(--color-sand) 55%, var(--color-paper));
  color: var(--color-ink);
  font-size: var(--font-size-sm);
}

.record-media-group {
  min-width: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-paper-muted);
}

.record-gallery {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.record-media {
  flex: 0 0 100%;
  position: relative;
  margin-bottom: 0;
  background: var(--color-paper-muted);
  scroll-snap-align: start;
}

.record-media img,
.record-media__placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
}

.catalogue-panel--restaurants .record-media__placeholder {
  min-height: 7rem;
  aspect-ratio: 16 / 5;
}

.record-media img {
  object-fit: cover;
}

.record-media__placeholder {
  display: grid;
  place-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-ink-muted);
  text-align: center;
}

.record-media__symbol {
  color: var(--color-border);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.5rem;
  line-height: 1;
}

.record-media__missing {
  font-size: var(--font-size-xs);
  font-weight: 800;
}

.record-media__credit {
  padding: var(--space-2) var(--space-3);
  background: var(--color-sea-deep);
  color: var(--color-white);
  font-size: var(--font-size-xs);
}

.record-media__credit a {
  color: var(--color-white);
}

.record-media__context {
  display: block;
  margin-bottom: var(--space-1);
  color: color-mix(in srgb, var(--color-white) 82%, var(--color-sea-pale));
}

.record-media__shortage {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

/* ============================================================
   Footer
   Design intent: Close on verification and offline boundaries.
   ============================================================ */

.site-footer {
  padding-block: var(--space-5);
  background: var(--color-sea-deep);
  color: var(--color-white);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-3);
}

.site-footer p {
  max-width: var(--reading-width);
  margin-bottom: 0;
}

.site-footer a {
  width: fit-content;
  color: var(--color-white);
  font-weight: 800;
}

/* ============================================================
   Responsive layout
   ============================================================ */

/* Tablet layout: distribute controls while preserving readable card widths. */
@media (min-width: 42rem) {
  .shell {
    width: min(calc(100% - (2 * var(--space-5))), var(--content-width));
  }

  .site-header__inner {
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
  }

  .site-header__place {
    text-align: right;
  }

  .catalogue-tabs__scroll {
    flex-wrap: nowrap;
  }

  .catalogue-tab {
    flex: 1 1 0;
  }

  .origin-strip__inner {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalogue-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .filter-field--search {
    grid-column: 1 / -1;
  }

  .record-card__body {
    padding: var(--space-5);
  }

  .site-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* Desktop layout: expand controls and catalogue records into a three-column rhythm. */
@media (min-width: 62rem) {
  .catalogue-filters {
    grid-template-columns: minmax(16rem, 1.5fr) repeat(3, minmax(9rem, 1fr)) auto;
  }

  .filter-field--search {
    grid-column: auto;
  }

  .catalogue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

/* Print layout: expose all catalogue panels and remove navigation-only controls. */
@media print {
  .skip-link,
  .catalogue-tabs,
  .filter-section {
    display: none !important;
  }

  .catalogue-panel[hidden] {
    display: block !important;
  }

  .catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .record-card,
  .fallback-list article {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Reduced-motion preference: remove smooth scrolling and all interface transitions. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}