/* Resplandor — colours and type from the Figma "Journal Page" designs */
:root {
  --bg: #faf8f2;
  --accent: #b87734;
  --ink: #000;
  --body: #484141;
  /* Gelasio is a free web font with Georgia's exact proportions. It only downloads
     on devices that don't have Georgia (Android, Linux), so text looks the same everywhere. */
  --serif: Georgia, Gelasio, "Times New Roman", serif;
  --display: "Cormorant Garamond", Georgia, Gelasio, serif;
  --label: Inter, system-ui, sans-serif;

  /* Margins follow the Figma proportions (175px on a 1440px screen) on every computer,
     and the content never grows wider than 1090px on big monitors.
     Text sizes are the Figma sizes on computers, with one smaller step for
     tablets and one for phones (see the media queries at the bottom). */
  --gutter: max(12.153vw, calc((100vw - 1090px) / 2));
  --column: 840px;           /* intro text and story pages (300px margins at 1440px) */
  --fs-title: 40px;
  --fs-intro: 20px;          /* intro and story text */
  --lh-intro: 35px;
  --fs-card-title: 30px;
  --fs-card-text: 12px;
  --lh-card-text: 24px;
  --fs-story-title: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; } /* full-screen photos never cause sideways scrolling */
body {
  container-type: inline-size; /* lets wide photos measure the page without the scrollbar (cqw) */
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

.container { padding-inline: var(--gutter); }
.container-narrow { width: min(var(--column), 100% - 2 * var(--gutter)); margin-inline: auto; }

.visually-hidden, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: absolute; top: 8px; left: 8px; z-index: 10; background: var(--accent); color: #fff; padding: 8px 12px; }

/* ---------- Header ---------- */
.site-header {
  display: grid;
  grid-template-columns: minmax(max-content, 228px) 1fr; /* line starts 228px after the logo, as in Figma */
  align-items: center;
  padding: 50px 0 0 var(--gutter);
}
.logo {
  font: 700 30px/25px var(--serif);
  color: var(--accent);
  text-decoration: none;
  transition: opacity .2s ease;
}
.logo:hover { opacity: .75; }
/* the sun dot inside the last "O" */
.logo-sun { position: relative; }
.logo-sun::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -45%);
}
.header-line {
  height: 5px;
  background: url("header-line.svg") no-repeat right center / 100% 5px;
}

/* ---------- Hero slideshow ----------
   Same width as the "Široka" story photos (slightly wider than the text, max 1090px),
   in a 16:9 frame: landscape photos lose little when cropped and are never blown up past
   1090px, so they stay sharp. */
.hero {
  position: relative;
  margin: 50px var(--gutter) 0; /* same edges as the logo and the story cards */
  aspect-ratio: 16 / 9;
  box-shadow: 0 7px 7px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  background: #2b2723;
  touch-action: pan-y; /* sideways swipes go to the slideshow, up/down still scrolls the page */
  user-select: none;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease, transform .6s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-dragging { transition: none; }
/* every photo fills the whole strip; "focus" in the editor picks which band of it shows */
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* dots in the middle, 25px from the top (wraps onto more rows if there are many photos) */
.hero-dots {
  position: absolute; z-index: 2; top: 25px; left: 20px; right: 20px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  min-height: 25px;
  pointer-events: none;
}
.hero-dot { pointer-events: auto; }

/* clicking the left or right part of the photo goes back / forward;
   a soft arrow appears on that side when the mouse is over it */
.hero-nav {
  position: absolute; z-index: 1; top: 0; bottom: 0; width: 35%;
  display: flex; align-items: center;
  padding: 0 24px; border: 0; background: none;
  color: #fff; cursor: pointer;
}
.hero-nav--prev { left: 0; justify-content: flex-start; }
.hero-nav--next { right: 0; justify-content: flex-end; }
.hero-nav svg {
  width: 34px; height: 34px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5));
  opacity: 0; transform: translateX(0); transition: opacity .25s ease, transform .25s ease;
}
.hero-nav:hover svg, .hero-nav:focus-visible svg { opacity: .9; }
.hero-nav--prev:hover svg { transform: translateX(-4px); }
.hero-nav--next:hover svg { transform: translateX(4px); }
.hero-nav:focus-visible { outline: 2px solid var(--bg); outline-offset: -6px; }
.hero-dot {
  width: 10px; height: 10px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(250, 248, 242, .5);
  cursor: pointer;
  transition: width .3s ease, height .3s ease, background-color .3s ease;
}
.hero-dot:hover { background: rgba(250, 248, 242, .85); }
.hero-dot[aria-current="true"] { width: 15px; height: 15px; background: var(--bg); }
.hero-dot:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; }

/* ---------- Shared bits ---------- */
.meta {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 0;
  font: 600 15px var(--label);
  letter-spacing: 1.8px;
  color: var(--accent);
}
.page-title, .section-title {
  font: 400 var(--fs-title)/1.1 var(--serif);
  margin: 0;
}

/* ---------- Journal (home) ---------- */
.intro { padding-top: 70px; }
.intro .page-title { text-align: center; margin-bottom: 33px; }
.intro p {
  max-width: var(--column); margin: 0 auto 25px;
  font-size: var(--fs-intro); line-height: var(--lh-intro);
}
.intro-quote {
  max-width: 847px; margin: 46px auto 0;
  font: italic var(--fs-intro)/1.5 var(--serif);
  text-align: center; opacity: 0.7;
}

.story-list { padding-top: 72px; padding-bottom: 120px; }
.story-list-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  margin-bottom: 64px;
}

/* Country filter — Figma: 250×40, 1.8px copper border, Inter 15px */
.country-filter { position: relative; display: block; width: min(250px, 100%); }
.country-filter select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 40px;
  padding: 0 50px 0 24px;
  background: var(--bg);
  border: 1.8px solid var(--accent); border-radius: 3px;
  color: var(--accent);
  font: 400 15px var(--label);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.country-filter::after {
  content: ""; position: absolute; right: 26px; top: 50%;
  width: 9px; height: 9px;
  border: solid var(--accent); border-width: 0 1.8px 1.8px 0;
  transform: translateY(-75%) rotate(45deg);
  pointer-events: none;
  transition: border-color .2s ease;
}
.country-filter:hover select { background: var(--accent); color: var(--bg); }
.country-filter:hover::after { border-color: var(--bg); }
.country-filter select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.country-filter option { background: var(--bg); color: var(--ink); }

.no-stories { font: italic 19px/28px var(--serif); color: var(--body); margin: 0; }

/* Story card — Figma: 475×314 photo, 683×234 text box overlapping it by 68px, 40px lower */
.story-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 407fr) minmax(0, 68fr) minmax(0, 615fr);
  margin-bottom: 50px;
}
.story-card[hidden] { display: none; }
/* display:block keeps the card shape on phones too, so tall photos get cropped to the centre */
.story-card-image { display: block; grid-column: 1 / 3; grid-row: 1; aspect-ratio: 475 / 314; overflow: hidden; }
.story-card-image picture { display: contents; }
.story-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.story-card:hover .story-card-image img { transform: scale(1.03); }
/* Every card is the same: the photo is always 475:314, and the text box (234/314 of the
   photo's height in Figma) is centred on it, with its text centred inside. Long titles
   are cut after 2 lines and the excerpt after 3, so no card grows taller than the others. */
.story-card-body {
  grid-column: 2 / 4; grid-row: 1;
  align-self: center;
  min-height: 75.5%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 25px;
  background: var(--bg);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}
.story-card .meta { font-size: 12px; letter-spacing: 1.44px; }
/* place and date always on one line (a very long place name ends in "…") */
.story-card .meta span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-card .meta time { flex-shrink: 0; }
.story-card-title {
  margin: 25px 0 10px;
  font: 500 var(--fs-card-title)/1.2 var(--display);
  letter-spacing: -0.01em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.story-card-title a { text-decoration: none; transition: color .2s ease; }
.story-card-title a:hover { color: var(--accent); }
.story-card-excerpt {
  margin: 0;
  font: var(--fs-card-text)/var(--lh-card-text) var(--serif);
  letter-spacing: 0.01em;
  color: var(--body);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.read-more {
  margin-top: 0; padding-top: 12px;
  align-self: flex-end;
  font: 700 12px var(--serif);
  letter-spacing: 1.44px;
  color: var(--accent);
}
.read-more:hover { text-decoration-thickness: 2px; }

/* ---------- Story page ---------- */
.story { padding: 75px 0 140px; }
.story-title {
  max-width: 694px; margin: 0 auto 50px;
  font: 500 var(--fs-story-title)/1.2 var(--display);
  letter-spacing: -0.01em;
  text-align: center;
}
.story .meta { margin-bottom: 25px; }
.story-body {
  font: var(--fs-intro)/var(--lh-intro) var(--serif);
  letter-spacing: 0.01em;
  color: var(--body);
}
.story-body p { margin: 0 0 var(--lh-intro); }
.story-body h2, .story-body h3 { font-family: var(--display); font-weight: 500; color: var(--ink); line-height: 1.2; }
.story-body h2 { font-size: 1.6em; margin: 48px 0 16px; }
.story-body h3 { font-size: 1.25em; margin: 36px 0 12px; }
.story-body img { width: 100%; margin: 12px 0; }
.story-body blockquote { margin: 32px 0; font-style: italic; opacity: .8; text-align: center; }
.story-body a { color: var(--accent); }
/* "Poravnanje" on a text part */
.align--center, .align--center-italic { text-align: center; }
.align--center-italic { font-style: italic; opacity: .85; }

/* Photos at the end of a story. Each photo picks a layout in the editor:
   full (column width), wide (wider than the text), half (two side by side), small (centred, narrower). */
.story-photos { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; }
/* photo parts in the middle of a story get the same space above and below as a paragraph */
.story-photos.story-section { margin-bottom: var(--lh-intro); }
.story-body:empty { display: none; }
.story-photo { flex: 1 1 100%; margin: 0; }
.photo-frame { position: relative; overflow: hidden; }
.photo-blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(22px); transform: scale(1.15); opacity: .6;
}
.photo-frame img { width: 100%; }
.story-photo figcaption { margin-top: 10px; font: italic 15px/1.4 var(--serif); color: var(--body); opacity: .8; }

/* Layouts */
.story-photo--half { flex: 1 1 calc(50% - 10px); min-width: 0; }
.story-photo--small { flex: 0 1 62%; margin-inline: auto; }
/* "Široka": lines up exactly with the logo and the slideshow on the home page */
.story-photo--wide {
  --wide: calc(100cqw - 2 * var(--gutter));
  flex: 0 0 auto; width: var(--wide);
  margin-inline: calc((100% - var(--wide)) / 2);
}
.story-photo--screen { flex: 0 0 auto; width: 100cqw; margin-inline: calc((100% - 100cqw) / 2); }
.story-photo--screen figcaption { padding-inline: var(--gutter); }

/* Crop shapes ("Oblik"). "Pola" photos without a shape get 4:5 so the pair lines up. */
.shape--landscape .photo-frame { aspect-ratio: 3 / 2; }
.shape--wide .photo-frame { aspect-ratio: 16 / 9; }
.shape--panorama .photo-frame { aspect-ratio: 21 / 9; }
.shape--square .photo-frame { aspect-ratio: 1; }
.shape--portrait .photo-frame,
.story-photo--half.shape--original .photo-frame { aspect-ratio: 4 / 5; }
.story-photo:not(.shape--original) .photo-frame img,
.story-photo--half .photo-frame img { height: 100%; object-fit: cover; }

.next-story {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  margin-top: 25px;
  text-decoration: none;
}
.next-label {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px var(--label); letter-spacing: 1.8px; color: var(--accent);
}
.next-title { font: 19px/28px var(--serif); letter-spacing: 0.19px; transition: color .2s ease; }
.next-story:hover .next-title { color: var(--accent); }
.next-story svg { transition: transform .3s ease; }
.next-story:hover svg { transform: translateX(4px); }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 28px var(--gutter) 40px;
  border-top: 1px solid rgba(184, 119, 52, .3);
  font: 600 13px var(--label); letter-spacing: 1.4px; color: var(--accent);
}
.footer-links { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Smaller laptops and tablets ---------- */
@media (max-width: 1099px) {
  :root {
    --fs-title: 36px;
    --fs-intro: 19px;
    --lh-intro: 32px;
    --fs-card-title: 27px;
    --fs-card-text: 13px;
    --lh-card-text: 22px;
    --fs-story-title: 52px;
  }
}

/* ---------- Phones ---------- */
@media (max-width: 820px) {
  :root {
    --gutter: 24px;
    --fs-title: 32px;
    --fs-intro: 18px;
    --lh-intro: 30px;
    --fs-card-title: 26px;
    --fs-card-text: 14px;
    --lh-card-text: 22px;
    --fs-story-title: 40px;
  }
  .site-header { grid-template-columns: auto 1fr; column-gap: 20px; padding-top: 28px; }
  .logo { font-size: 24px; }
  .hero { margin-top: 28px; aspect-ratio: 4 / 3; } /* a little taller on phones so photos aren't tiny */
  .hero-nav svg { display: none; } /* phones: tap the sides or swipe, no arrows */
  /* on phones the dots sit at the bottom of the photo, under the thumb */
  .hero-dots { top: auto; bottom: 16px; }
  .intro { padding-top: 48px; }
  .story-list { padding-top: 64px; }
  .story-list-head { margin-bottom: 32px; }
  .story-card { display: block; margin-bottom: 44px; }
  .story-card-body { margin: -40px 0 0 16px; min-height: 0; padding: 20px 20px 22px; position: relative; }
  /* same room on every phone card: 2 lines for the title, 3 for the excerpt */
  .story-card-title { min-height: 2.4em; }
  .story-card-excerpt { min-height: calc(3 * var(--lh-card-text)); }
  .story { padding-top: 56px; }
  .story-title { margin-bottom: 32px; }
  .story .meta { flex-direction: column; gap: 4px; }
  .story-photos { gap: 12px; }
  .story-photo--half { flex-basis: calc(50% - 6px); } /* pairs stay side by side on phones too */
  .story-photo--small { flex-basis: 100%; }
  .story-photo--wide { width: 100%; margin-inline: 0; }
  .story-photo--screen figcaption { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}