/* ==========================================================================
   content.css — homepage skin + article pages + guides grid
   (panatara-hotel.com).

   ARTICLE LAYER REDESIGN 2026-10-29 — "seaside guest-guide brochure":
   the shared story-* and artcard skeleton used by the builder-family sites
   was replaced with a printed-brochure language rooted in this site's
   own 2010 Dreamweaver identity — warm cream paper, brown ink #996600,
   amber #f7d38a band, Georgia serif headings, hairline double rules,
   matted "mounted print" photos, numbered guide-index rows. System
   fonts only; the site ships no webfonts and must stay self-contained.
   The homepage skin below (topbar/masthead/hero/gallery/map/foot) is
   untouched. Original images kept; hero/gallery may use real GMB photos
   pulled once into img/places/home/.
   ========================================================================== */

:root {
  --accent: #996600;
  --accent-dark: #5f4200;
  --accent-soft: #e9c46a;
  --ink: #3d3325;
  --muted: #7d715c;
  --bg: #fdf8ec;
  --panel: #fffdf5;
  --line: #e8dcc0;
  --amber: #f7d38a;
  --shadow: 0 2px 10px rgba(95, 66, 0, .10);
  --shadow-hover: 0 6px 18px rgba(95, 66, 0, .16);
  --radius: 10px;
  --pill: 30px;
  --heading: Georgia, 'Times New Roman', 'Leelawadee UI', Tahoma, serif;
  --body: 'Segoe UI', Verdana, Tahoma, 'Leelawadee UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--body);
}
img { max-width: 100%; height: auto; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ==========================================================================
   HOMEPAGE SKIN (index.html + index2.html, emitted by make_home_v2.py)
   ========================================================================== */

.topbar {
  background: var(--accent-dark); color: #f7ecd7;
  font-size: .85rem;
}
.topbar-in {
  max-width: 1080px; margin: 0 auto; padding: 8px 20px;
  display: flex; justify-content: flex-end; align-items: center; gap: 14px;
}
.topbar a {
  color: #f7ecd7; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.topbar a:hover { color: #fff; }
.topbar img { height: 15px; width: auto; display: block; border: 1px solid rgba(255,255,255,.35); }
.topbar .lang.current { opacity: .95; font-weight: 700; cursor: default; }

.masthead {
  background: var(--accent); text-align: center;
  padding: 30px 20px;
}
.wordmark { display: inline-block; color: #fff; }
.wordmark-name {
  font-family: var(--heading); font-size: 2.1rem; letter-spacing: .22em;
  display: block; text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.wordmark-sub {
  font-family: var(--body); font-size: .95rem; letter-spacing: .3em;
  display: block; margin-top: 6px; color: rgba(255,255,255,.85);
}
.hero { max-width: 1080px; margin: 0 auto; padding: 26px 20px 0; }
.hero img {
  width: 100%; border-radius: var(--radius); box-shadow: var(--shadow);
  display: block;
}

.home-intro {
  max-width: 860px; margin: 0 auto; padding: 30px 20px 10px;
  text-align: center;
}
.home-intro p {
  font-size: 1.06rem; line-height: 1.9; margin: 0;
  color: var(--ink);
}

.home-gallery {
  max-width: 1080px; margin: 0 auto; padding: 26px 20px 8px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.home-gallery figure {
  margin: 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.home-gallery figure.wide { grid-column: 1 / -1; }
.home-gallery img { display: block; width: 100%; height: 300px; object-fit: cover; }
@media (max-width: 560px) {
  .home-gallery img { height: 200px; }
}

.home-map {
  max-width: 760px; margin: 0 auto; padding: 26px 20px 40px; text-align: center;
}
.home-map img {
  width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
  box-shadow: var(--shadow); display: block;
}

.home-foot {
  background: var(--amber); color: var(--accent-dark);
  text-align: center; padding: 26px 20px; line-height: 1.9;
}
.home-foot .addr { font-weight: 700; }

/* ==========================================================================
   ARTICLE PAGES — guest-guide brochure
   ========================================================================== */

.article {
  max-width: 980px; margin: 0 auto; padding: 40px 20px 64px;
}

/* centered brochure head between double rules */
.brochure-head {
  text-align: center;
  padding: 6px 0 26px;
  margin: 0 0 34px;
  border-bottom: 3px double var(--accent);
}
.brochure-kicker {
  margin: 0 0 16px;
  font-size: .72rem; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--accent);
}
.story-h1 {
  font-family: var(--heading); font-weight: 400;
  font-size: 2rem; line-height: 1.35; letter-spacing: .01em;
  color: var(--accent-dark); margin: 0 0 .55em;
}
.story-byline {
  margin: 0; font-size: .9rem; color: var(--muted); font-style: italic;
  border: 0; padding: 0;
}
.story-intro { font-size: 1.02rem; color: var(--muted); margin: 0 0 1.6em; }

/* body: serif small-caps centered section heads with amber ornament */
.story-text h2 {
  font-family: var(--heading); font-weight: 400;
  font-size: 1.3rem; line-height: 1.4; color: var(--accent-dark);
  text-align: center; font-variant: small-caps; letter-spacing: .05em;
  margin: 2.2em 0 .8em;
}
.story-text h2::after {
  content: ""; display: block; width: 54px; height: 3px;
  background: var(--amber); margin: .5em auto 0;
  border-radius: 2px;
}
.story-text h3 { font-size: 1.1rem; color: var(--accent-dark); margin: 1.7em 0 .5em; }
.story-text p { margin: .85em 0; }
/* drop cap opens the story only */
.story-text > p:first-of-type::first-letter {
  font-family: var(--heading);
  float: left; font-size: 3.3em; line-height: .82;
  padding: .06em .12em 0 0; color: var(--accent);
}
.story-text ul, .story-text ol { margin: .85em 0; padding-left: 1.5em; }
.story-text li { margin: .3em 0; }
.story-text li::marker { color: var(--accent); }
.story-text blockquote {
  margin: 1.4em auto; padding: .6em 1.4em;
  max-width: 640px; text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  color: var(--muted); font-style: italic; font-family: var(--heading);
}
.story-text pre {
  background: var(--panel); border: 1px solid var(--line);
  padding: 12px 14px; border-radius: var(--radius); overflow-x: auto; font-size: .9em;
}
.story-text code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; }
.story-text table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .95em; }
.story-text th, .story-text td {
  border: 1px solid var(--line); padding: 8px 12px;
  text-align: left; vertical-align: top;
}
.story-text th { background: var(--panel); color: var(--accent-dark); font-family: var(--heading); }
.story-text hr { border: 0; border-top: 3px double var(--line); margin: 2.4em 0; }
.story-text img { border-radius: var(--radius); }

/* ---- brochure cover: hero plate + bottom picture plates -------------------- */
/* the first photo is a large mounted plate; the hotel panel overlaps its
   bottom edge (brochure cover look); remaining photos hang as plates
   after the story. */
.hero-plate {
  margin: 0; line-height: 0;
  background: #fff; padding: 10px;
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow);
  cursor: zoom-in;
}
.hero-plate img {
  display: block; width: 100%; height: 420px; object-fit: cover;
  border-radius: 2px;
}

/* leftover plates: the rare photos that ran past the section headings hang
   as a small strip after the story */
.plates {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; margin: 2.8em auto 0; max-width: 860px;
}
.plates .plate-cell:only-child { grid-column: 1 / -1; }
.plates .plate-cell:only-child img { height: 320px; }

/* woven brochure plates: one mounted print per section */
.story-photo {
  margin: 2.6em auto 1.4em; max-width: 760px;
  background: #fff; padding: 10px;
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow);
  cursor: zoom-in;
}
.story-photo img { display: block; width: 100%; height: auto; border-radius: 2px; }
.plate-cell {
  padding: 0; background: #fff; border: 0;
  cursor: zoom-in; line-height: 0;
  background: #fff; padding: 8px;
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow);
  transition: box-shadow .16s ease;
}
.plate-cell:hover { box-shadow: var(--shadow-hover); }
.plate-cell img {
  display: block; width: 100%; height: 200px; object-fit: cover;
  border-radius: 2px;
  transition: opacity .18s ease;
}
.plate-cell:hover img { opacity: .88; }
@media (max-width: 560px) {
  .hero-plate img { height: 220px; }
  .plates { gap: 12px; }
  .plate-cell { padding: 6px; }
  .plate-cell img { height: 120px; }
  .story-photo { padding: 6px; }
}

/* ---- <hotel-data> — "at a glance" panel (hairlines, serif, amber) ---------- */
/* CSS restyle of the DOM rendered by js/hotel-data.js.
   The panel is pulled up over the hero plate's bottom edge (brochure cover). */
hotel-data { display: block; margin: -64px auto 40px; max-width: 860px; position: relative; }
.hotelcard-box {
  display: flex; gap: 26px; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line); border-top: 3px double var(--accent);
  border-radius: 0;
  padding: 22px 26px;
  box-shadow: 0 10px 26px rgba(95, 66, 0, .18);
}
.hotelcard-scorebox { flex: 0 0 auto; text-align: center; min-width: 100px; }
.hotelcard-score {
  font-family: var(--heading);
  font-size: 2.4rem; font-weight: 400; color: var(--accent); line-height: 1.05;
}
.hotelcard-stars {
  position: relative; display: inline-block;
  font-size: .95rem; line-height: 1; letter-spacing: 2px; color: #ddd2b8;
}
.hotelcard-stars-bg { white-space: nowrap; }
.hotelcard-stars-fg {
  position: absolute; top: 0; left: 0;
  overflow: hidden; white-space: nowrap; color: var(--accent-soft);
}
.hotelcard-count {
  font-size: .78rem; color: var(--muted); margin-top: 5px; white-space: nowrap;
  font-style: italic;
}
.hotelcard-info { flex: 1 1 auto; min-width: 0; }
.hotelcard-name {
  font-family: var(--heading); font-weight: 400;
  font-size: 1.15rem; color: var(--accent-dark); line-height: 1.35;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.hotelcard-tag {
  font-family: var(--body);
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: none;
  border: 1px solid var(--accent-soft); border-radius: 0; padding: 2px 10px;
}
.hotelcard-lines {
  display: flex; flex-direction: column; gap: 5px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line);
}
.hotelcard-line {
  display: flex; align-items: center; gap: 8px; width: fit-content;
  font-size: .88rem; color: var(--muted); text-decoration: none;
}
.hotelcard-line svg { flex: 0 0 auto; color: var(--accent-soft); }
.hotelcard-line:hover { color: var(--accent); }
.hotelcard-line:hover svg { color: var(--accent); }
.hotelcard-cta {
  display: inline-block; margin-top: 14px; text-align: center;
  padding: 9px 22px;
  border: 1px solid var(--accent); border-radius: 0;
  color: var(--accent-dark); background: none; text-decoration: none;
  font-family: var(--body); font-weight: 700; font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.hotelcard-cta:hover { background: var(--accent); color: #fff; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(48, 36, 8, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 84vh;
  background: #fff; padding: 10px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.lightbox button {
  position: absolute; background: rgba(255, 255, 255, .12); color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
  width: 44px; height: 44px; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.lightbox button:hover { background: var(--accent); border-color: var(--accent); }
.lightbox-x { top: 18px; right: 18px; }
.lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   GUIDES GRID — printed-guide index rows (homepage section + /places/)
   Numbered entries, matted thumbnail left, hairline rules between rows.
   ========================================================================== */

.gdgrid {
  padding: 46px 0 54px; clear: both;
  background: linear-gradient(180deg, rgba(247, 211, 138, .18), rgba(247, 211, 138, 0) 65%);
  border-top: 3px double var(--accent);
}
.gdgrid-in { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.gdgrid-head {
  font-family: var(--heading); font-weight: 400;
  margin: 0 0 6px; text-align: center; font-size: 1.7rem; color: var(--accent-dark);
}
.gdgrid-sub {
  margin: 0 0 8px; text-align: center; color: var(--muted); font-size: .95rem;
  font-style: italic;
}
.gdgrid-list {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  counter-reset: gdrow;
}
.gdgrid-list-page { margin-top: 10px; }

/* one index row */
.gdrow {
  display: grid; grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px; align-items: start;
  padding: 24px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
  counter-increment: gdrow;
  transition: background-color .2s ease;
}
.gdrow:hover { background: rgba(255, 253, 245, .85); color: inherit; }

.gdrow-img {
  background: #fff; padding: 7px;
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: var(--shadow); line-height: 0;
}
.gdrow-img img {
  display: block; width: 100%; height: 138px; object-fit: cover; border-radius: 2px;
}
.gdrow-body { min-width: 0; }
.gdrow-hotel {
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.gdrow-hotel::before {
  content: "№ " counter(gdrow, decimal-leading-zero);
  font-family: var(--heading); font-style: italic; font-weight: 400;
  font-size: .95rem; text-transform: none; letter-spacing: .02em;
  color: var(--muted);
  margin-right: 12px;
}
.gdrow-title {
  font-family: var(--heading); font-weight: 400;
  margin: 0 0 8px; font-size: 1.18rem; line-height: 1.4; color: var(--accent-dark);
}
.gdrow:hover .gdrow-title { color: var(--accent); }
.gdrow-text {
  margin: 0 0 10px; font-size: .9rem; line-height: 1.65; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gdrow-meta {
  font-family: var(--heading); font-style: italic;
  font-size: .82rem; color: var(--muted);
}

.gdgrid-more {
  display: table; margin: 30px auto 0; padding: 10px 30px;
  border: 1px solid var(--accent); border-radius: 0;
  color: var(--accent-dark); background: var(--panel); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}
.gdgrid-more:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Muse/theme link overrides not needed here (plain static homepage):
   keep anchor colors explicit for safety */
.gdgrid a.gdrow, .gdgrid a.gdrow:link { color: inherit; text-decoration: none; }
.gdgrid a.gdgrid-more, .gdgrid a.gdgrid-more:link { color: var(--accent-dark); text-decoration: none; }

@media (max-width: 620px) {
  .gdrow { grid-template-columns: 1fr; gap: 14px; padding: 20px 2px; }
  .gdrow-img img { height: 170px; }
}

/* ---- article page footer -------------------------------------------------- */
.pagefoot { margin-top: 46px; background: var(--accent-dark); color: rgba(255, 255, 255, .82); border-top: 4px solid var(--amber); }
.pagefoot-in {
  max-width: 1080px; margin: 0 auto; padding: 34px 20px 38px;
  text-align: center; font-size: .85rem; line-height: 1.8;
}
.pagefoot-brand {
  font-family: var(--heading); letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
}
.pagefoot-addr { color: rgba(255, 255, 255, .62); }
.pagefoot a { color: var(--accent-soft); text-decoration: none; }
.pagefoot a:hover { color: #fff; }
.pagefoot-copy { margin-top: 10px; color: rgba(255, 255, 255, .45); font-size: .78rem; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 560px) {
  .hotelcard-box { flex-direction: column; align-items: flex-start; gap: 16px; padding: 18px 20px; }
  .hotelcard-scorebox { display: flex; align-items: baseline; gap: 10px; text-align: left; min-width: 0; }
}
@media (max-width: 640px) {
  .article { padding: 26px 16px 48px; }
  .story-h1 { font-size: 1.5rem; }
  .gdgrid { padding: 34px 0 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .gdrow, .gdgrid-more, .plate-cell, .plate-cell img, .hotelcard-cta { transition: none; }
}

/* brochure layout: single centered column, no sidebar. The story keeps a
   comfortable printed measure; hero, hotel panel and plates run wider. */
.story-text { max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  hotel-data { margin: -44px auto 34px; }
}