/* 2026-09-15 | The Retreat, Carlingford | guide page ("What's on in Carlingford")
   ------------------------------------------------------------------
   Its own stylesheet, like gallery.css: one page uses it and nothing else should.
   site.css and responsive.css load first and still supply the masthead, footer,
   buttons and type, so this file only adds the list.
   ------------------------------------------------------------------ */

/* the wordmark is a link back to the house on the generated pages
   (the same rule lives in gallery.css - each page loads only its own) */
.wordmark__link { text-decoration: none; color: inherit; display: block; }

/* read out by a screen reader, not shown: "(opens RTE in a new tab)" */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- page head ---------- */

.guidehead { padding: var(--gap) 0 1.4rem; text-align: center; }
.guidehead h1 { margin-bottom: .5rem; }
.guidehead .eyebrow { margin-bottom: 1rem; }
.guidehead .eyebrow a { text-decoration: none; color: var(--ink-faint); }
.guidehead .eyebrow a:hover { color: var(--ink); }
/* centred, so it cannot use the 66ch measure p inherits */
.guidehead__sub { max-width: 56ch; margin-inline: auto; }

/* ---------- the list ---------- */

/* A reading column, not the full 1240px: these are sentences, and a line of text
   the width of a desktop screen is hard to follow back to its start. */
.guide { max-width: 820px; padding-bottom: var(--gap); }

.guidegroup { padding-top: 2.2rem; margin-top: 2.2rem; border-top: 1px solid var(--line); }
.guidegroup:first-child { border-top: 0; margin-top: 0; }
.guidegroup h2 { margin-bottom: .6rem; }

/* js/guide.js sets [hidden] on items past their date. The attribute alone is not
   enough once a display value is set anywhere in the cascade, so say it outright. */
.guidegroup[hidden],
.guideitem[hidden],
.guide__empty[hidden] { display: none; }

.guideitem { padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.guideitem:last-child { border-bottom: 0; }

.guideitem__meta {
  margin: 0 0 .35rem;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint);
}
.guideitem__source { color: var(--accent-dark); }

.guideitem__title { font-size: 1.35rem; margin: 0 0 .45rem; }
.guideitem__title a {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: .22em; text-decoration-thickness: 1px;
}
.guideitem__title a:hover { color: var(--accent-dark); text-decoration-color: currentColor; }
/* every title leaves the site - the arrow says so before the click, not after */
.guideitem__title a::after { content: " \2197"; font-size: .7em; color: var(--ink-faint); }
.guideitem__title a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.guideitem__summary { margin: 0 0 .45rem; }
.guideitem__door { margin: 0; font-size: .86rem; color: var(--ink-faint); }
.guideitem__door::before { content: "\2192\00a0"; color: var(--accent); }

.guide__empty { text-align: center; margin: 2.4rem auto; }

.guide__foot {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
  padding-top: 2.6rem; max-width: none;
}

@media (max-width: 720px) {
  .guideitem__title { font-size: 1.12rem; }
}