/* ─── Animationer ─── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scrollPulse {

  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.4;
  }

  50% {
    transform: scaleY(0.5);
    opacity: 1;
  }
}

/* ─── Hero ─── */
.hero {
  position: relative;
  width: 100%;
  /* main is pushed down by the fixed header, so a full 100vh would hang below
     the fold and take the hero text and button with it. --header-offset is set
     from the measured header height; --header-height is the static fallback.
     Sizing the section (not just the image) also gives the absolutely
     positioned hero text and scroll hint the right box to sit against. */
  height: calc(100vh - var(--header-offset, var(--header-height)));
  /* dvh where supported, so mobile browser chrome doesn't push it over */
  height: calc(100dvh - var(--header-offset, var(--header-height)));
  overflow: hidden;
}

/* <picture> is inline by default, and the image inside sizes itself against
   it — so it has to carry the hero's full height through to the <img> */
.hero picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  animation: scaleIn 1.4s ease forwards;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.hero-text {
  position: absolute;
  bottom: 80px;
  left: 60px;
  z-index: 2;
  animation: fadeUp 1s ease 0.6s both;
}

.hero-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-style: italic;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.2;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}

.hero-text p {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 28px;
  max-width: 420px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.hero-cta {
  display: inline-block;
  padding: 14px 36px;
  background: var(--bg-warm);
  color: var(--text-dark);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 40px;
  transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.hero-cta:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.hero-scroll {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: fadeIn 1s ease 1.5s both;
}

.hero-scroll span {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

.hero-scroll-line {
  width: 1px;
  height: 50px;
  background: rgba(255, 255, 255, 0.4);
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ─── Om mig ─── */
.intro-section {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  height: 100vh;
  width: 100%;
  padding: 30px 0;
}

.intro-image-side {
  position: relative;
  overflow: hidden;
}

.intro-image-side img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform 0.9s ease;
}

.intro-image-side:hover img {
  transform: scale(1.04);
}

.intro-text-side {
  background: var(--bg-warm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 70px 80px 80px;
}

.intro-label {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-green);
  font-weight: 700;
  margin-bottom: 20px;
  padding-top: 4px;
}

.intro-text-side h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-style: italic;
  color: var(--text-dark);
  margin: 0 0 24px;
  line-height: 1.3;
}

.intro-text-side p {
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 16px;
  max-width: 100%;
  opacity: 0.85;
}

.intro-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--accent-green);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: gap 0.2s;
}

.intro-link:hover {
  gap: 16px;
}

.intro-link::after {
  content: "→";
  font-size: 1.1rem;
}

/* ─── Utvalda verk ─── */
.featured-section {
  width: 100%;
  height: fit-content;
  padding: 30px 0;
  background: var(--bg-light);
}

.featured-inner {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 60px;
}

.featured-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
}

.featured-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-style: italic;
  margin: 0;
}

.featured-header a {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-green);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}

.featured-header a:hover {
  opacity: 0.7;
}

.featured-grid {
  display: grid;
  /* Written by the build: widths proportional to the square root of each
     painting's aspect ratio, which gives the three cards about the same area.
     Nothing is cropped, and no painting dominates the row for being a
     different shape. The fallback is the old fixed hierarchy. */
  grid-template-columns: var(--featured-columns, 1.4fr 1fr 1fr);
  gap: 30px;
  /* Cards keep each painting's own proportions, so they differ in height.
     Sitting them on a shared baseline lines the titles up and reads as an
     arrangement rather than as three things that failed to match. */
  align-items: end;
}

/* Generated as links by scripts/build-painting-pages.js, so each card opens
   the work it shows instead of being a dead image */
.featured-card {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 4px 20px var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-card img {
  width: 100%;
  /* The real ratio comes from images/paintings/metadata.json, written onto
     each card by the build. Cropping every painting to 3/4 took a fifth off a
     near-square work and would take half of a landscape one — the shop grid
     has always shown true proportions, and now the homepage does too. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.featured-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px 20px 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  opacity: 1;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.3s;
}
/* ── Postklubbsband längst ner på startsidan ─────────────────── */

.promo-section {
  width: 100%;
  padding: 60px 0 80px;
  background: var(--bg-light);
}

.promo-section[hidden] {
  display: none;
}

.promo-inner {
  max-width: 90%;
  margin: 0 auto;
  padding: 0 60px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.promo-media {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 16px 45px var(--shadow-light);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promo-media:hover,
.promo-media:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 22px 55px var(--shadow-light);
}

.promo-media img {
  width: 100%;
  height: auto;
  display: block;
}

.promo-label {
  margin: 0 0 8px;
  color: var(--accent-green);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.promo-text h2 {
  margin: 0 0 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  text-align: left;
}

.promo-text p {
  margin: 0 0 12px;
  max-width: 520px;
  font-size: 1rem;
  line-height: 1.65;
}

.promo-quarter:empty {
  display: none;
}

.promo-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent-green);
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}

.promo-link:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .promo-inner {
    grid-template-columns: 1fr;
    padding: 0 20px;
    gap: 26px;
  }

  .promo-text h2 { text-align: left; }
}