/* Barra Heritage & Cultural Centre — Comunn Eachdraidh Bharraidh agus Bhatarsaigh
   Plain CSS, no framework. Palette from the Dualchas mark and the Hebridean sea. */
:root {
  --sea: #14425c; --sea-dark: #0d2f43; --wave: #1d6f99;
  --stone: #f7f4ef; --sand: #ece5da; --ink: #23282c; --ink-soft: #55606a;
  --line: #d8cfc2; --focus: #b8860b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--stone); color: var(--ink);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-text-size-adjust: 100%; }
h1, h2, h3, .wordmark { font-family: Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.2; color: var(--sea); }
h1 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0 0 .6em; }
h3 { font-size: 1.1rem; margin: 1.4em 0 .3em; }
p { margin: 0 0 1em; }
a { color: var(--wave); }
a:hover { color: var(--sea); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
img, video { max-width: 100%; height: auto; display: block; }
.wrap { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }
.wrap.narrow { width: min(560px, 100% - 2.5rem); }

/* header / footer */
.topbar { background: var(--sea); font-size: .86rem; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: flex-end; padding: .45rem 0; }
.topbar a { color: #dbe9f2; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
header.site { background: #fff; border-bottom: 1px solid var(--line); }
header.site .wrap { padding: 1.1rem 0 .8rem; }
.wordmark { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.wordmark .logo { width: 58px; flex: none; }
.wordmark .en { display: block; font-size: clamp(1.2rem, 2.8vw, 1.6rem); color: var(--sea); }
.wordmark .gd { display: block; font: .8rem/1.3 -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-top: .2rem; }
nav.main { margin-top: .9rem; }
nav.main ul { display: flex; flex-wrap: wrap; gap: .1rem 1.3rem; list-style: none; margin: 0; padding: 0; }
nav.main a { color: var(--ink); text-decoration: none; font-size: .95rem; padding: .3rem 0; display: inline-block; border-bottom: 2px solid transparent; }
nav.main a:hover { border-bottom-color: var(--line); }
nav.main a[aria-current="page"] { color: var(--sea); font-weight: 600; border-bottom-color: var(--wave); }
footer.site { background: var(--sea); color: #cfe0ea; padding: 2.2rem 0 2.4rem; font-size: .95rem; }
footer.site h2 { color: #fff; font-size: 1.05rem; margin: 0 0 .6rem; }
footer.site a { color: #fff; }
footer.site p { margin-bottom: .45em; }
footer.site .cols { display: grid; gap: 1.6rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.6rem; padding-top: .9rem; font-size: .85rem; color: #9fbccd; }

/* bands: every story is its own full-width band, alternating shade */
.band { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.band.tint { background: var(--sand); }
.band.head { padding-bottom: 1rem; }
.band.head .intro { max-width: 62ch; color: var(--ink-soft); font-size: 1.08rem; }
.kicker { font-style: italic; color: var(--ink-soft); margin: -.2em 0 1em; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.flip .split .copy { order: 2; }
.copy { max-width: 60ch; }
.only-text .split, .only-media .split { grid-template-columns: 1fr; }
.only-text .copy { max-width: 70ch; }
.link { font-weight: 600; word-break: break-word; }

/* photos and videos inside a band */
.gallery { display: grid; gap: .8rem; }
.gallery.n2 { grid-template-columns: 1fr 1fr; }
.gallery.n3 { grid-template-columns: 1fr 1fr; }
.gallery.n3 > .media:first-child { grid-column: 1 / -1; }
.gallery.n3 > .media:first-child img { aspect-ratio: auto; object-fit: contain; }
.only-media .gallery { width: 100%; max-width: 980px; margin-inline: auto; }
.media { margin: 0; }
.media img, .media video { width: 100%; border-radius: 3px; background: #000; }
.gallery.n2 .media img, .gallery.n3 .media img { aspect-ratio: 4/3; object-fit: cover; background: var(--sand); }
figcaption { font-size: .86rem; color: var(--ink-soft); margin-top: .45rem; line-height: 1.45; }
.band.logo .gallery { max-width: 240px; justify-self: center; align-self: center; }
.band.logo .media img { background: transparent; }

/* photo bands (text or a title over one of their photos) */
.band.photo { position: relative; background-color: var(--sea-dark); background-position: center; background-size: cover; background-repeat: no-repeat; background-blend-mode: luminosity; color: #fff; text-align: center; }
.band.photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(8,26,38,.62), rgba(8,26,38,.4) 75%); }
.band.photo > .wrap { position: relative; max-width: 700px; }
.band.photo h1 { color: #fff; }
.band.photo.title { padding: 4rem 0; }
.band.photo.title h1 { margin: 0; }

/* home */
.hero img { width: 100%; height: clamp(220px, 34vh, 380px); object-fit: cover; }
.visit { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1.1rem 1.4rem; margin: 1.4rem 0 0; max-width: 620px; }
.visit dl { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.4rem; margin: 0; }
.visit dt { font-weight: 600; color: var(--sea); }
.visit dd { margin: 0; }
.map { margin-top: 1.6rem; }
.map iframe { width: 100%; height: 340px; border: 1px solid var(--line); border-radius: 4px; display: block; background: var(--sand); }
.maplink { font-size: .9rem; margin-top: .5rem; }
.tiles-band { background: var(--sea); }
.tiles { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tile { display: block; background: #fff; border-radius: 4px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.tile img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.tile img[src*="dualchas-logo"] { object-fit: contain; padding: .8rem; }
.tile span { display: block; padding: .7rem .5rem; text-align: center; font-family: Georgia, serif; color: var(--sea); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* events */
.events { display: grid; gap: 1.4rem; }
.event { display: grid; grid-template-columns: 240px 1fr; gap: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1.2rem; }
.event img { width: 100%; border-radius: 3px; }
.event .where { color: var(--ink-soft); font-size: .92rem; }
.event summary { cursor: pointer; color: var(--wave); }
.empty { color: var(--ink-soft); font-size: 1.05rem; }

/* shop */
.shop { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.item { background: #fff; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.item .copy { padding: .8rem .9rem; }
.item h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.price { font-weight: 600; margin: 0; }
.out { color: #9b2c2c; margin: .3rem 0 0; }

/* phones and small tablets */
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .flip .split .copy { order: 0; }
  .event { grid-template-columns: 1fr; }
  .event img { max-width: 320px; }
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tiles .tile:last-child:nth-child(odd) img { aspect-ratio: 16/9; }
  .visit dl { grid-template-columns: 1fr; gap: .1rem; }
  .visit dt { margin-top: .5rem; }
}