/*
 * Post-conversion design adjustments, loaded after the compiled site CSS.
 * The compiled CSS is never edited; site-specific tweaks requested after the
 * conversion live here.
 */

/* Mobile/tablet: long-text columns and FAQ blocks sit directly in their
   section (no .container), so give them the same side gutter as .container.
   Above 840px the 760px column already has room on both sides. */
@media (max-width: 840px) {
  .prose,
  .faq-block {
    padding-inline: clamp(20px, 5vw, 40px);
  }
}

/* Footer description: the shared .text-muted colour is dark ink, unreadable
   on the dark footer; match the footer's link colour instead. */
.site-footer .text-muted {
  color: color-mix(in srgb, var(--cream) 78%, transparent);
}

/* Embedded contact form (Google Forms): the card frames the iframe; the
   iframe's own height comes from site.map.json (Google embeds don't resize). */
.form-embed {
  padding: 0;
  overflow: hidden;
  scroll-margin-top: 96px; /* clear the sticky header when jumped to via #forma */
}
.form-embed iframe {
  display: block;
  width: 100%;
  border: 0;
}
/* The pinned "Κλείστε ραντεβού" bar links to the contact page; on that page
   it only covers the form, so hide it there. */
body:has(.form-embed) .mobile-cta {
  display: none !important;
}
.form-embed__open {
  margin: 0.8rem 0 0;
  font-size: 0.9rem;
  text-align: center;
}
.form-embed__open a {
  color: var(--sage-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Team photos: a square, centred crop cut off the top of portrait photos.
   A taller 4:5 frame anchored at the top keeps heads in frame; landscape
   photos only lose background at the sides. */
.team-card .team-photo img {
  aspect-ratio: 4 / 5;
  object-position: center top;
}