/* ---------------------------------------------------------------------------
   The Skiathos Guide — "Things to do" index.

   One job: show the whole island's sights at a glance. A photograph where an
   allowed photograph genuinely shows the place, one line of what it is, and
   three mono facts a visitor actually asks — how to get there, how long to
   allow, what it costs. Nothing here restyles the shared chrome.
   --------------------------------------------------------------------------- */

/* Two of the six brand colours are fixed light values, so they cannot carry
   text on a dark card. These tokens keep the same roles legible in both. */
:root {
  --sg-key: var(--pine);
  --sg-strong: var(--deep);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sg-key: var(--shallow);
    --sg-strong: var(--text);
  }
}
:root[data-theme="dark"] {
  --sg-key: var(--shallow);
  --sg-strong: var(--text);
}

/* style.css paints the body and the untinted sections from --wash, which is a
   fixed light value, so in dark mode this page came out light under light
   headings and the section titles all but vanished. --bg is the same colour in
   light and follows the theme in dark, so naming it here is right in both. */
body { background: var(--bg); }
section:nth-of-type(even) { background: color-mix(in srgb, var(--shallow) 4%, var(--bg)); }

/* --------------------------------------------------------------- THE GRID */

.sightgrid {
  display: grid;
  /* auto-fit, not auto-fill: a row of three must fill the row, not sit in
     three quarters of it with an empty track on the end. */
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 26px;
}

.sight {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.sight:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--shallow); }
.sight:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }

.sight .savebtn { position: absolute; top: 12px; right: 12px; z-index: 4; }

/* ------------------------------------------------------------ THE PICTURE */

.sight .im {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sandy);
}
.sight .im img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.1s var(--ease);
}
.sight:hover .im img { transform: scale(1.06); }

/* style.css grades every other photograph on the site. These cards are new
   classes, so they miss it and read flat beside the rest. Same grade, once. */
.sight .im img, .feature .im img { filter: saturate(1.28) contrast(1.04) brightness(1.09); }

/* The type of thing it is, on the picture rather than competing with the name. */
.sight .tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, .94);   /* paper, not a brand hue: the pill sits on a photograph */
  color: var(--deep);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(10, 58, 71, .18);   /* --deep, the site's shadow tint */
}

/* Where no photograph on this site honestly shows the place, we say so rather
   than borrow one that shows somewhere else. The plate carries the Greek name
   instead, so the grid still reads as a designed set. */
.sight .im.plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 18px 52px;
  background:
    radial-gradient(130% 95% at 14% 6%, rgba(255, 255, 255, .78), transparent 62%),
    linear-gradient(148deg, color-mix(in srgb, var(--shallow) 44%, var(--wash)) 0%, color-mix(in srgb, var(--sandy) 92%, var(--wash)) 100%);
}
.sight .plate .gk {
  font-family: var(--font-display);
  font-size: 1.58rem;
  font-weight: 500;
  line-height: 1.16;
  color: var(--deep);
  opacity: .88;
  text-align: center;
  letter-spacing: -.01em;
}
.sight .plate .nophoto {
  font-family: var(--font-mono);
  font-size: .53rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pine);
  opacity: .72;
  text-align: center;
}

/* --------------------------------------------------------------- THE WORDS */

.sight .bd {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 22px;
}
.sight h3 {
  margin: 0 0 8px;
  font-size: 1.26rem;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.012em;
  color: var(--text);
}
.sight:hover h3 { color: var(--aegean); }
.sight .bd > p {
  margin: 0 0 18px;
  color: var(--text-soft);
  font-size: .93rem;
  line-height: 1.62;
}

/* ---------------------------------------------------- THE FACTS, IN MONO */

.facts {
  list-style: none;
  margin: auto 0 0;
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
}
.facts li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
  font-size: .69rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.facts .k {
  color: var(--sg-key);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding-top: 2px;
}
.facts b { color: var(--sg-strong); font-weight: 500; }

/* ------------------------------------------------------- THE TWO BIG DRAWS */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 26px;
}
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.feature:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--shallow); }
.feature:focus-visible { outline: 2px solid var(--shallow); outline-offset: 3px; }
.feature .im { position: relative; overflow: hidden; background: var(--sandy); aspect-ratio: 16 / 9; }
.feature .im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.feature:hover .im img { transform: scale(1.06); }
.feature .bd { padding: 26px 28px 28px; display: flex; flex-direction: column; }

/* One feature on its own row reads better with the picture beside the words. */
.features-one .feature { grid-template-columns: 44% 1fr; }
.features-one .feature .im { aspect-ratio: auto; min-height: 330px; }
.feature .eyebrow { margin: 0 0 10px; color: var(--bougie); }
.feature h3 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.014em;
}
.feature .bd > p { margin: 0 0 4px; color: var(--text-soft); font-size: .96rem; line-height: 1.62; }
/* On a feature the facts follow the words straight away; the link is what sits
   at the foot of the card, so the two cards end level. */
.feature .facts { margin-top: 14px; }
.feature .gonow { margin-top: auto; padding-top: 18px; }

.warnnote {
  margin: 16px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.6;
  letter-spacing: .01em;
}

.gonow {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sg-key);
}
.feature:hover .gonow, .sight:hover .gonow { color: var(--bougie); }

/* --------------------------------------------------------- SIMPLE LINK ROW */

.morelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin-top: 4px;
}
.morelink {
  display: block;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-alt);
  text-decoration: none;
  color: inherit;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.morelink:hover { transform: translateY(-4px); border-color: var(--shallow); box-shadow: var(--shadow); }
.morelink strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: 500;
  margin-bottom: 5px;
  letter-spacing: -.01em;
}
.morelink span {
  font-family: var(--font-mono);
  font-size: .66rem;
  line-height: 1.6;
  color: var(--text-soft);
}

/* ------------------------------------------------------------- NARROW SCREENS */

@media (max-width: 860px) {
  .features { grid-template-columns: 1fr; }
  .features-one .feature { grid-template-columns: 1fr; }
  .features-one .feature .im { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
  .sightgrid { grid-template-columns: 1fr; gap: 20px; }
  .sight .im { aspect-ratio: 16 / 10; }
  .sight .bd { padding: 18px 18px 20px; }
  .feature .bd { padding: 22px 20px 24px; }
  .feature h3 { font-size: 1.4rem; }
  .facts li { grid-template-columns: 62px 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .sight, .feature, .morelink, .sight .im img, .feature .im img { transition: none !important; }
  .sight:hover, .feature:hover, .morelink:hover { transform: none !important; }
  .sight:hover .im img, .feature:hover .im img { transform: none !important; }
}