/*
 *  lga
 *
 *  The pages of the new design ("Documento di Progetto", October 2026), on top of
 *  lga.css: "contemporary architecture magazine", a lot of white, few elements, the
 *  neutrals of the palette and no accent but the colors of the photos. An elegant serif
 *  the site's two fonts (lga.css): Questrial for the text and the titles, Noto Serif italic
 *  for the quotations, the sentences that say it all and the reviews.
 *  Every rule is under .lga-page, so it wins over Bootstrap's element rules.
 *
 *  Copyright (C) 2020-2026 Marco Mastroddi. All rights reserved.
 */

.lga-page {
  --lga-space: clamp(4.5rem, 10vw, 9rem);
  /* the size of the hero at the top of a page: its height and its title (it was 47rem and up to 4.6rem; "medium") */
  --lga-hero-height: min(32rem, calc(100vh - 9rem));
  --lga-hero-title: clamp(2.1rem, 3.8vw, 3.4rem);
  --lga-nero: #2e2b2a;
  overflow-x: clip;

  h1,
  h2,
  h3 {
    margin: 0;
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: inherit;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--lga-hero-title);
  }

  h2 {
    font-size: clamp(2rem, 3.6vw, 3.25rem);
  }

  p,
  ul,
  figure,
  blockquote {
    margin: 0;
    text-wrap: pretty;
  }

  ul {
    padding: 0;
    list-style: none;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* the small capitals of the calls to action */
  .lga-arrow {
    color: var(--lga-testo);
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .lga-lead {
    max-width: 36rem;
    font-size: 1.125rem;
    color: var(--lga-testo-2);
  }

  .lga-lead + .lga-lead {
    margin-top: 1rem;
  }

  /* a sentence that says it all: in the font of the quotations and the reviews */
  .lga-statement {
    margin-bottom: 1.75rem;
    font-family: var(--lga-font-serif);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.4;
  }

  /* running text: paragraphs one under the other */
  .lga-text > * + * {
    margin-top: 1rem;
  }

  .lga-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--lga-testo-2);
  }
}

/* a section: a wide column, the air above and below */
.lga-page .lga-section {
  padding-block: var(--lga-space);
}

.lga-page .lga-wrap {
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--lga-gutter);
}

.lga-page .lga-avorio {
  background-color: var(--lga-avorio);
}

.lga-page .lga-perla {
  background-color: var(--lga-perla);
}

/* 01 hero: the words, and a photo as high as them */
/* the band as wide as the page, its words and its photo inside the page's column (82rem) with its gutters,
   where the logo and the menu start and end (the padding's 100% is the page's width) */
.lga-page .lga-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: var(--lga-hero-height);
  padding-inline: max(0px, (100% - 82rem) / 2);
  background-color: var(--lga-avorio);
}

.lga-page .lga-hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  padding-inline: var(--lga-gutter) clamp(1.5rem, 4.5vw, 5rem);
}

.lga-page .lga-hero-photo,
.lga-page .lga-hero-portrait {
  margin-inline-end: var(--lga-gutter);
}

.lga-page .lga-wishes {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--lga-carbone);
  /* the font of the testimonials (Marco, 2026-10-12) */
  font-family: var(--lga-font-serif);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
}

.lga-page .lga-hero-text .lga-lead {
  font-size: 1.0625rem;
}

.lga-page .lga-hero-text .lga-eyebrow {
  margin-bottom: 1.25rem;
  /* in the text pink and bold, so the small capitals read well on a phone (Marco, 2026-10-13) */
  color: var(--lga-rosa-testo);
  font-weight: 700;
}

/* the page's name above the heading only while the menu is folded (Laura, 2026-10-13): with
   the menu open on one line (Breakpoint::Xl in Layout.php) the underlined item already says it */
@media (min-width: 1200px) {
  .lga-page .lga-hero-text .lga-eyebrow {
    display: none;
  }
}

.lga-page .lga-hero-text .lga-text {
  margin-top: 2rem;
}

.lga-page .lga-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.25rem;
}

.lga-page .lga-actions-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 1rem;
  width: fit-content;
  max-width: 100%;
  text-align: center;
}

.lga-page .lga-hero-photo {
  position: relative;
  min-height: 22rem;

  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* the about page: her portrait small and round beside the words (a photo of any shape, the face in its upper part) */
.lga-page .lga-hero-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);

  img {
    width: min(100%, 24rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 50%;
  }
}

/* 02, 06 and 10: a photo beside the words */
.lga-page .lga-duo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;

  img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  h2 {
    margin-bottom: 1.75rem;
  }

  .wm-arrow-link {
    margin-top: 2.25rem;
  }
}

/* 10 and the about page: her portrait, small and round */
.lga-page .lga-duo .lga-portrait {
  img {
    display: block;
    margin-inline: auto;
    width: min(100%, 20rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
  }
}

/* the approach page's nature: a photo and, over its lower corner toward the words, one of its details,
   framed by the color of the section */
.lga-page .lga-duo .lga-inset {
  position: relative;
  padding-bottom: 14%;

  img {
    display: block;
    width: 80%;
  }

  img + img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 42%;
    border: 0.5rem solid var(--lga-avorio);
  }
}

/* the about page: every photo in black and white */
.lga-page.lga-bw img {
  filter: grayscale(1);
}

/* 03 projects: three photos, each a link */
.lga-page .lga-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.lga-page .lga-projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.lga-page .lga-project {
  display: block;
  text-decoration: none;

  .lga-frame {
    overflow: hidden;
    background-color: var(--lga-perla);
  }

  img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 0.6s;
  }

  &:hover img {
    transform: scale(1.03);
  }

  &:focus-visible {
    outline: 2px solid var(--lga-carbone);
    outline-offset: 4px;
  }
}

/* 04 the six things she looks at: lines and words, no icons */
.lga-page .lga-looks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);

  li {
    padding-top: 1.1rem;
    border-top: 1px solid var(--lga-carbone);
  }

  h3 {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
  }

  p {
    font-size: 1rem;
    color: var(--lga-testo-2);
  }
}

/* the portfolio: a hero of words only when she has no photo for it */
.lga-page .lga-hero-plain {
  grid-template-columns: 1fr;
  min-height: 0;
}

/* two white sections one after the other: the air of one, not of two */
.lga-page .lga-section:not(.lga-avorio, .lga-perla, .lga-dark) + .lga-section:not(.lga-avorio, .lga-perla, .lga-dark) {
  padding-top: 0;
}

/* the Bootstrap icon before the text of a button or a link (WhatsApp): the text's color, a little larger */
.lga-page .lga-button .bi,
.lga-page .lga-arrow .bi {
  margin-right: 0.35em;
  font-size: 1.2em;
  vertical-align: -0.15em;
}

.lga-page .lga-hero-text h1 + .lga-lead {
  margin-top: 1.5rem;
}

/* the small headings of her texts (the legacy h5): the size of a sub-title, not of a section's */
.lga-page .lga-text .h5,
.lga-page .lga-doc .h5 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--lga-carbone);
}

/* the approach page: a word on one side, its text on the other; a sentence that says it all between the paragraphs */
.lga-page .lga-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: start;
}

/* the sections that alternate: the text on the left, the word on the right (the word stays first in the HTML) */
.lga-page .lga-split.lga-split-flip {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);

  > h2 {
    order: 2;
    text-align: end;
  }
}

/* the word stays in view while its text is read (the menu is 5.3rem high) */
@media (min-width: 62rem) {
  .lga-page .lga-split > h2 {
    position: sticky;
    top: 7.5rem;
  }
}

.lga-page .lga-text .lga-statement {
  margin: 1.5rem 0 0;
}

.lga-page .lga-text .lga-statement + * {
  margin-top: 1.5rem;
}

/* the lists of her texts, and the privacy page's text as wide as its column */
.lga-page .lga-text ul {
  padding-left: 1.25rem;
  list-style: disc;
}

.lga-page .lga-text li + li {
  margin-top: 0.5rem;
}

.lga-page .lga-doc .lga-text,
.lga-page .lga-doc .lga-lead {
  max-width: none;
}

.lga-page .lga-doc > h2 + .lga-text,
.lga-page .lga-doc > h2 + .lga-lead {
  margin-top: 1.75rem;
}

.lga-page .lga-doc > h1 + .lga-text {
  margin-top: 1.75rem;
}

/*
 * The services page: a section that the home links to (the sticky menu, 5.3rem,
 * must not cover its title), a photo on one side and the words on the other, the
 * sides changing at every service, for whom it is right under the sentence and
 * the rest behind a button, so that a section is as high as its photo.
 */
@media (min-height: 500px) {
  .lga-page .lga-service {
    scroll-margin-top: 5.5rem;
  }
}

.lga-page .lga-service {
  padding-block: clamp(3rem, 6vw, 5rem);
}

.lga-page .lga-service-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;

  &.lga-service-flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
}

.lga-page .lga-service-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.lga-page .lga-service-words {
  .lga-statement {
    margin: 1.25rem 0 0;
  }

  .lga-for-you {
    margin-top: 1.75rem;
  }
}

.lga-page .lga-for-you {
  padding-left: 1.25rem;
  border-left: 1px solid var(--lga-carbone);
  color: var(--lga-testo);

  strong {
    color: var(--lga-carbone);
  }
}

/* "Keep reading": the quiet look of the site's links (a line, small capitals), not a Bootstrap button */
.lga-page .lga-service-more {
  margin-top: 1.75rem;

  .lga-more-button {
    padding: 0 0 0.35rem;
    font: inherit;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--lga-testo);
    cursor: pointer;
    background: none;
    border: 0;
    border-bottom: 1px solid currentcolor;

    &:focus-visible {
      outline: 2px solid currentcolor;
      outline-offset: 4px;
    }

    &::after {
      content: "\2193";
      content: "\2193" / "";
      margin-left: 0.6em;
    }

    &[aria-expanded="true"]::after {
      content: "\2191";
      content: "\2191" / "";
    }
  }

  .collapse > * + * {
    margin-top: 1rem;
  }

  .collapse > .lga-service-cta {
    margin-top: 1.75rem;
  }
}

/* the privacy page: a long text in a reading column, the titles in the serif */
.lga-page .lga-doc {
  max-width: 46rem;
  margin-inline: auto;

  h1 {
    margin-bottom: 1.5rem;
  }

  .wm-prose {
    --wm-prose-heading-align: start;
    --wm-prose-emphasis: var(--lga-carbone);
    margin-top: 3rem;
    font-size: 1.0625rem;

    h2 {
      margin: 3rem 0 1rem;
      font-size: clamp(1.6rem, 2.4vw, 2rem);
      font-weight: 400;
      line-height: 1.15;
      letter-spacing: -0.01em;
    }

    p {
      margin-bottom: 1rem;
    }

    ul {
      margin-bottom: 1rem;
      padding-left: 1.25rem;
      list-style: disc;
    }

    li + li {
      margin-top: 0.5rem;
    }

    code {
      font-size: 0.9em;
      color: var(--lga-carbone);
    }
  }
}

/* the contact page: the ways to reach her, links in the text color */
.lga-page .lga-looks a:not(.wm-arrow-link, .lga-button) {
  color: var(--lga-carbone);
}

.lga-page .lga-looks li p + p {
  margin-top: 0.75rem;
}

/* the contact page: the mobile phone and the e-mail, an icon before each line */
.lga-page .lga-contacts {
  display: grid;
  gap: 1.5rem;
  max-width: 40rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;

  li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 1rem;
    align-items: start;
    padding-top: 1.1rem;
    border-top: 1px solid var(--lga-carbone);
  }

  .bi {
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--lga-rosa-testo);
  }

  p {
    margin: 0;
    font-size: 1.15rem;
  }

  p + p {
    margin-top: 0.4rem;
    font-size: 1rem;
    color: var(--lga-testo-2);
  }

  a {
    color: var(--lga-carbone);
  }
}

.lga-page .lga-map {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-inline: 0;
}

/* 05 services: an index (Widget\LinkIndex) and two more ways in */
.lga-page .wm-link-index {
  --wm-link-index-rule: var(--lga-carbone);
  --wm-link-index-line: var(--lga-linea);
  margin-top: clamp(2rem, 4vw, 3.5rem);

  h3 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  }

  p {
    font-size: 1rem;
    color: var(--lga-testo-2);
  }
}

.lga-page .lga-more {
  margin-top: 2rem;
  color: var(--lga-testo-2);

  & + & {
    margin-top: 0.75rem;
  }

  .wm-arrow-link {
    margin-left: 0.75rem;
    color: var(--lga-testo);
  }
}

/* 06 light: the dark band of the page */
.lga-page .lga-dark {
  color: #fff;
  background-color: var(--lga-nero);

  .lga-duo {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }

  p {
    max-width: 38rem;
    color: #d9d4ce;
  }

  p + p {
    margin-top: 1rem;
  }

  .lga-arrow {
    color: #fff;
  }

  .lga-statement {
    margin: 1.75rem 0 0;
    color: #fff;
  }

  img {
    aspect-ratio: 3 / 4;
    max-width: 30rem;
    margin-left: auto;
  }
}

/* 07 designing to feel good: one narrow column, centered */
.lga-page .lga-narrow {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;

  h2 {
    margin: 1rem 0 2rem;
  }

  .lga-lead {
    max-width: none;
  }

  .wm-arrow-link {
    margin-top: 2.25rem;
  }
}

/* 08 details: four photos with a line each */
.lga-page .lga-narrow-title {
  max-width: 22ch;
}

.lga-page .lga-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);

  img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  figcaption {
    margin-top: 0.8rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: var(--lga-testo-2);
  }
}

/* 09 three short testimonials, no carousel */
.lga-page .lga-voices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);

  figure {
    padding-top: 1.1rem;
    border-top: 1px solid var(--lga-carbone);
  }

  blockquote {
    margin: 1rem 0 1.25rem;
    font-family: var(--lga-font-serif);
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.7;
  }

  figcaption {
    font-size: 0.9rem;
    color: var(--lga-testo-2);
  }
}

/* the about page: the five verbs of her way of designing, and a strip of her own photos */
.lga-page .lga-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);

  li {
    padding-top: 1.1rem;
    border-top: 1px solid var(--lga-carbone);
  }

  h3 {
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
  }

  p {
    font-size: 1rem;
    color: var(--lga-testo-2);
  }
}

.lga-page .lga-narrow .lga-statement {
  margin-block: 2rem;

  &:first-child {
    margin-top: 0;
  }
}

.lga-page .lga-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);

  img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

.lga-page .lga-voices-more {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* the reviews page: all of them, one under the other, in the legacy look (stars, Noto Serif italic between the pink marks) */
.lga-page .lga-reviews {
  max-width: 46rem;
  margin-inline: auto;
}

.lga-page .lga-review-item {
  padding-block: 2.25rem;
  border-top: 1px solid var(--lga-linea);

  &:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .lga-stars {
    margin-bottom: 0.75rem;
    text-align: center;
  }

  .lga-quotation {
    margin: 0 auto;
  }
}

/* 11 the last call */
.lga-page .lga-closing {
  text-align: center;

  .lga-actions {
    justify-content: center;
    margin-top: 2.5rem;
  }

  p {
    max-width: 34rem;
    margin: 1.5rem auto 2.5rem;
    font-size: 1.125rem;
    color: var(--lga-testo-2);
  }
}

@media (max-width: 61.99rem) {
  .lga-page {
    .lga-duo .lga-portrait img {
      width: min(100%, 14rem);
    }

    .lga-hero {
      grid-template-columns: 1fr;
      min-height: 0;
    }

    .lga-hero-text {
      padding-inline-end: var(--lga-gutter);
    }

    /* on phones the photo above the words, from edge to edge */
    .lga-hero-photo {
      order: -1;
      min-height: 0;
      aspect-ratio: 4 / 3;
      margin-inline-end: 0;
    }

    .lga-hero-portrait {
      order: -1;
      margin-inline-end: 0;
      padding: 2rem var(--lga-gutter) 0;

      img {
        width: 13rem;
      }
    }

    .lga-duo,
    .lga-split,
    .lga-split.lga-split-flip,
    .lga-service-row,
    .lga-service-row.lga-service-flip,
    .lga-dark .lga-duo {
      grid-template-columns: 1fr;
    }

    .lga-split.lga-split-flip > h2 {
      order: 0;
      text-align: start;
    }

    .lga-dark img {
      margin-inline: 0;
    }

    .lga-looks,
    .lga-details,
    .lga-steps {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lga-strip {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lga-voices {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 39.99rem) {
  .lga-page {
    .lga-projects {
      grid-template-columns: 1fr;
    }

    .lga-project img {
      aspect-ratio: 4 / 3;
    }

    .lga-looks {
      gap: 1.75rem 1.25rem;
    }

    .lga-looks h3 {
      font-size: 1.45rem;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .lga-page .lga-project img {
    transition: none;
  }

  .lga-page .lga-project:hover img {
    transform: none;
  }
}