/* ============================================================
   Atelier Linnea — Page layouts
   Specific layout rules per template.
   ============================================================ */

/* ---- Home: intro split ---- */
.intro-media {
  position: relative;
}

.intro-media img {
  border-radius: var(--r-arch);
  aspect-ratio: 4 / 3.4;
  width: 100%;
  object-fit: cover;
}

.intro-badge {
  position: absolute;
  right: -1.2rem;
  bottom: 2.4rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
  padding: 1rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-sm);
  font-weight: 650;
}

.intro-badge .icon { color: var(--accent); }

.intro-copy h2 { max-width: 15ch; margin-bottom: 1.4rem; }

.intro-copy > p { color: var(--muted); }
.intro-copy > p + p { margin-top: 1.1rem; }

.intro-signature {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.intro-signature .sig-name { font-family: var(--font-display); font-style: italic; font-size: 1.35rem; }
.intro-signature .sig-role { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-mid); color: var(--muted); }

/* ---- About: studio story ---- */
.story-lead {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw + 0.7rem, 2.3rem);
  line-height: 1.4;
  font-weight: 380;
  color: var(--ink);
  max-width: 30ch;
}

.story-lead em { color: var(--accent); }

.story-body p + p { margin-top: 1.1rem; }
.story-body p { color: var(--muted); }

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.8vw + 0.6rem, 1.8rem);
  font-style: italic;
  font-weight: 380;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding-left: 1.5rem;
  margin-block: 1.8rem;
  max-width: 30ch;
}

.award-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.award-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  padding: 1.5rem 0.2rem;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 700px) {
  .award-row { grid-template-columns: 2.4rem 1.4fr 1fr auto; align-items: baseline; gap: 1.2rem; }
}

.award-row .award-year { font-family: var(--font-display); font-style: italic; color: var(--accent); }
.award-row h3 { font-size: 1.12rem; }
.award-row .award-where { color: var(--muted); font-size: var(--fs-sm); }
.award-row .award-tag {
  justify-self: start;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mid);
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  color: var(--ink-2);
}

/* ---- Work page ---- */
.work-count { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.6rem; }
.work-count strong { color: var(--ink); }

/* ---- Services: alternating rows ---- */
.service-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-block: clamp(2.6rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .service-row { grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 5.5rem); }
  .service-row:nth-child(even) .service-row-media { order: 2; }
}

.service-row-media img { border-radius: var(--r-l); aspect-ratio: 4 / 2.9; width: 100%; object-fit: cover; }

.service-row-copy h3 { margin: 0.9rem 0 0.9rem; font-size: clamp(1.4rem, 2vw + 0.6rem, 1.9rem); }
.service-row-copy p { color: var(--muted); }

.service-deliverables { margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.service-deliverables li { display: flex; gap: 0.75rem; font-size: var(--fs-sm); color: var(--ink-2); }
.service-deliverables .icon { flex: none; color: var(--accent); margin-top: 0.15rem; }

/* ---- Contact ---- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
}

@media (min-width: 960px) { .contact-grid { grid-template-columns: 1.15fr 0.85fr; } }

.contact-card {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
}

.contact-card + .contact-card { margin-top: 1.4rem; }

.contact-card h2 { font-size: 1.3rem; margin-bottom: 1.1rem; display: flex; align-items: center; gap: 0.8rem; }
.contact-card h2 .icon { color: var(--accent); }

.contact-lines li { display: flex; gap: 1rem; align-items: baseline; }
.contact-lines li + li { margin-top: 0.9rem; }
.contact-lines .icon { flex: none; color: var(--accent); transform: translateY(3px); }
.contact-lines a:hover { color: var(--accent); }

.contact-hours { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); display: grid; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink-2); }
.contact-hours dt { font-weight: 650; }

/* ---- 404 ---- */
.not-found p { margin: 1rem auto 2.4rem; color: var(--muted); max-width: 44ch; }
.not-found .btn { margin-inline: 0.4rem; }