/* ==========================================================================
   About page ("Η ιστορία μας"): page layer on top of template.css + sloppy.css
   ========================================================================== */

/* ---------- Header: the template's red band is teal now, so its text is ink ---------- */
.about-header_subtitle { color: var(--ink); font-weight: 500; }

/* Ink type cannot sit on top of the photo the way the template's white type did, so from tablet up the two
   stacked headlines live in the gutters beside the blob: the blob is a little narrower and nudged left, and the
   type scales with the container (--ah-c) so the widest word of each stack always fits its gutter. */
@media screen and (max-width: 767px) {
  .about-header_head-1 h1, .about-header_head-2 .heading-style-h1 { font-size: min(15vw, 5.5rem); }
}
@media screen and (min-width: 768px) {
  .section_about-header { --ah-c: calc(100vw - 4.5rem); }
  .about-header_head-1 h1, .about-header_head-2 .heading-style-h1 { font-size: calc(var(--ah-c) * 0.091); }
  .about-header_imgs { width: 50%; margin-right: 9%; }
  .about-header_head-1 { max-width: 20.5%; }
  .about-header_head-2 { max-width: 29.5%; top: auto; bottom: 5.75rem; }
  .about-header_subtitle { max-width: 100%; }
}
@media screen and (min-width: 992px) {
  .section_about-header { --ah-c: calc(min(100vw, 98rem) - 8rem); }
  /* the marquee follows the (now fluid) blob height instead of a fixed 7rem, so it never climbs into the left stack */
  .about-header_marquee { bottom: 12%; }
  .about-header_head-2 { bottom: calc(12% + 5.75rem); }
}
.about-header_story { color: var(--ink); }
.about-header_story .text-size-medium { font-weight: 500; }

/* "Η ιστορία μας" label: ink script with a white hard shadow (the template's white-on-red would fail on teal) */
.section_about-header .label_text { white-space: nowrap; }
.section_about-header .label_text.white { color: var(--ink); }
.section_about-header .label_text._2.black { color: #fff; transform: translate(0.14rem, 0.14rem) rotate(-3deg); }

/* Marquee: script "Sloppy" stands in for the template's wordmark image */
.about-header_sloppy {
  flex: none;
  font-family: var(--_typography---font-family--detail);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand);
  white-space: nowrap;
  transform: rotate(-4deg);
}
@media screen and (max-width: 767px) {
  .about-header_sloppy { font-size: 1.05rem; }
}

/* ---------- Scroll sequence ---------- */
/* stacked (tablet / mobile) reading order = the order the wheel shows them on desktop */
@media screen and (max-width: 991px) {
  .about-us_sentence-3 { order: 4; }
  .about-us_sentence-4 { order: 3; }
}
/* desktop wheel: the template sizes the photos in vh, places them in % of the width and keeps the type at a fixed 9rem, so the
   collage only fits a 16:10 viewport that is at least 900px tall. --au is 1% of the viewport height, capped at the 16:10 ratio:
   photos and type scale together, so shorter / narrower laptop screens get the same composition instead of type over the photos. */
@media screen and (min-width: 992px) {
  .section_about-us { --au: min(1vh, 0.625vw); }
  .about-us_text { font-size: min(var(--_typography---h1--font-size), calc(16 * var(--au))); }
  .about-us_img-1 { height: calc(27 * var(--au)); }
  .about-us_img-2, .about-us_img-3 { height: calc(33 * var(--au)); }
  .about-us_img-4 { height: calc(29 * var(--au)); }
}
/* phones: a touch smaller so the words only brush the photos at the edges instead of running across them */
@media screen and (max-width: 479px) {
  .about-us_text { font-size: 3.25rem; }
}

/* ---------- "Γιατί Sloppy" ---------- */
/* short heading: one line, with the sparkles right next to it */
.about-best_heading-wrap { max-width: none; }
.about-best_heading-wrap h2 { white-space: nowrap; }
.about-best_text { color: #5b5b5b; }

/* ---------- "Πες ένα γεια" card ---------- */
.about-contact_hours { text-wrap: balance; }
@media screen and (max-width: 767px) {
  .about-contact_component .heading-style-h3 { font-size: 3rem; }
  .about-contact_hours { font-size: 1.125rem; margin-top: 0.5rem; }
}
.about-contact_link { color: var(--brand-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 0.18em; }
.about-contact_link:hover { color: var(--ink); }
/* fixed backgrounds jitter / zoom on touch browsers and small screens */
@media (hover: none), (max-width: 991px) {
  .section_about-contact { background-attachment: scroll; }
}

/* ---------- Images carry width/height attributes (stable layout); keep the template's fluid sizing ---------- */
.about-header_img-border { height: auto; }
@media screen and (min-width: 992px) {
  .about-us_img-1, .about-us_img-2, .about-us_img-3, .about-us_img-4 { width: auto; }
}

/* room for the template's hover "bite" (top-right corner of the button) so it does not eat the last letter of the longer Greek label */
@media (hover: hover) and (min-width: 992px) {
  .about-contact_component .button { padding-left: 3rem; padding-right: 3rem; }
}