/* =========================================================
   ALULA COMMUNICATIONS
   Page layouts
   ========================================================= */


/* ---------------------------------------------------------
   Shared page width
   --------------------------------------------------------- */

.hero,
.page-hero,
.services-hero,
.intro,
.services,
.about,
.contact,
.error-page {
  width:
    min(
      calc(100% - (2 * var(--page-padding))),
      var(--page-width)
    );

  margin-inline: auto;
}


/* =========================================================
   STANDARD PAGE HEROES
   ========================================================= */

.hero,
.page-hero,
.services-hero {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;

  min-height:
    min(720px, 76svh);

  padding-top:
    clamp(5rem, 10vw, 8rem);

  padding-bottom:
    clamp(5rem, 10vw, 8rem);
}


/*
   No large pseudo-element geometry here.

   The earlier version drew a giant translucent oval behind
   every page hero. Decorative geometry now belongs to the
   interactive Alula layer instead.
*/


.hero h1,
.page-hero h1,
.services-hero h1 {
  max-width: 11ch;
}


/* subtle illuminated initial */

.hero h1::first-letter,
.page-hero h1::first-letter,
.services-hero h1::first-letter {
  color: var(--gold);

  text-shadow:
    0 1px 0
      rgba(255, 255, 255, 0.45),

    0 0 1.2rem
      rgba(159, 122, 50, 0.12);
}


.hero > p:not(.eyebrow),
.page-hero > p:not(.eyebrow),
.services-hero > p:not(.eyebrow) {
  max-width: 39rem;

  margin-bottom: 2rem;

  color: var(--ink-soft);

  font-family: var(--body-font);

  font-size:
    clamp(1.05rem, 1.5vw, 1.22rem);

  line-height: 1.75;
}


/* =========================================================
   PAGE CTA
   ========================================================= */

.hero > a,
.page-hero > a,
.services-hero > a,
.error-page > a {
  position: relative;

  align-self: flex-start;

  width: fit-content;

  padding: 0.55rem 0;

  color: var(--ink);

  font-size: 0.78rem;
  font-weight: 600;

  letter-spacing: 0.11em;

  text-decoration: none;
  text-transform: uppercase;
}


.hero > a::after,
.page-hero > a::after,
.services-hero > a::after,
.error-page > a::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );

  transform-origin: left;

  transition:
    transform 320ms var(--ease-alula);
}


.hero > a:hover::after,
.hero > a:focus-visible::after,
.page-hero > a:hover::after,
.page-hero > a:focus-visible::after,
.services-hero > a:hover::after,
.services-hero > a:focus-visible::after,
.error-page > a:hover::after,
.error-page > a:focus-visible::after {
  transform: scaleX(0.55);
}


/* =========================================================
   HOME INTRO
   ========================================================= */

.intro {
  display: grid;

  grid-template-columns:
    minmax(0, 0.95fr)
    minmax(0, 1.05fr);

  column-gap:
    clamp(3rem, 9vw, 8rem);

  row-gap: 1.25rem;

  padding-top:
    clamp(5rem, 10vw, 8rem);

  padding-bottom:
    clamp(6rem, 12vw, 10rem);

  border-top:
    1px solid var(--line);
}


.intro h2 {
  grid-row:
    1 / span 2;

  max-width: 11ch;

  margin: 0;

  font-size:
    clamp(2.4rem, 5vw, 4.8rem);

  line-height: 0.98;
}


.intro p {
  grid-column: 2;

  max-width: 36rem;

  margin: 0;

  color: var(--ink-soft);

  font-family: var(--body-font);

  font-size:
    clamp(1rem, 1.35vw, 1.15rem);

  line-height: 1.75;
}


.intro p:first-of-type {
  font-size:
    clamp(1.08rem, 1.55vw, 1.25rem);

  color: var(--ink);
}


/* =========================================================
   SERVICES
   ========================================================= */

.services {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 1px;

  margin-bottom:
    clamp(5rem, 10vw, 9rem);

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-lg);

  background:
    var(--line);

  box-shadow:
    0 1.5rem 4rem
      rgba(73, 52, 35, 0.06);
}


.services article {
  position: relative;

  min-height: 18rem;

  padding:
    clamp(2rem, 5vw, 3.5rem);

  background:
    rgba(251, 245, 232, 0.62);

  transition:
    background 250ms ease,
    transform 250ms var(--ease-alula);
}


.services article::before {
  content: "";

  display: block;

  width: 2.8rem;
  height: 1px;

  margin-bottom: 2rem;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-light)
    );
}


.services article:hover {
  background:
    rgba(255, 250, 238, 0.84);
}


.services article h2 {
  max-width: 13ch;

  font-size:
    clamp(1.7rem, 3vw, 2.55rem);
}


.services article p {
  max-width: 31rem;

  margin-bottom: 0;

  font-family: var(--body-font);
}


/* =========================================================
   ABOUT
   ========================================================= */

.about {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 0.9fr)
    minmax(0, 1.1fr);

  gap:
    clamp(3rem, 9vw, 8rem);

  margin-bottom:
    clamp(5rem, 10vw, 9rem);

  padding:
    clamp(4rem, 9vw, 7rem)
    0;

  border-top:
    1px solid var(--line);

  border-bottom:
    1px solid var(--line);
}


.about h2 {
  max-width: 12ch;
}


.about p {
  max-width: 42rem;

  color: var(--ink-soft);

  font-family: var(--body-font);

  font-size:
    clamp(1rem, 1.3vw, 1.15rem);

  line-height: 1.75;
}


/*
   Deliberately no .about p:first-of-type font-family rule.

   That selector was what made unrelated paragraphs inherit
   the large display serif.
*/


/* =========================================================
   CONTACT
   ========================================================= */

.contact {
  position: relative;

  margin-bottom:
    clamp(6rem, 12vw, 10rem);

  padding:
    clamp(2.5rem, 6vw, 5rem);

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius:
    var(--radius-lg);

  background:

    radial-gradient(
      circle at 86% 20%,
      rgba(215, 185, 104, 0.08),
      transparent 20rem
    ),

    rgba(251, 245, 232, 0.52);

  box-shadow:
    0 1.5rem 4rem
      rgba(73, 52, 35, 0.055);
}


.contact h2 {
  max-width: 13ch;
}


.contact p {
  max-width: 42rem;

  font-family: var(--body-font);
}


.contact a {
  color: var(--gold);

  font-weight: 500;

  text-decoration-color:
    rgba(159, 122, 50, 0.45);

  text-underline-offset: 0.22em;
}


/* =========================================================
   ERROR PAGE
   ========================================================= */

.error-page {
  min-height: 70vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.error-page h1 {
  max-width: 10ch;
}


.ruby-slippers {
  margin-bottom: 1.5rem;

  font-size:
    clamp(2.3rem, 6vw, 4.6rem);

  line-height: 1;

  filter:
    drop-shadow(
      0 0.8rem 1.5rem
      rgba(159, 122, 50, 0.13)
    );
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 820px) {

  .about,
  .intro {
    grid-template-columns: 1fr;

    gap: 2rem;
  }


  .intro h2,
  .intro p {
    grid-column: 1;
    grid-row: auto;
  }


  .services {
    grid-template-columns: 1fr;
  }


  .services article {
    min-height: auto;
  }


  .hero,
  .page-hero,
  .services-hero {
    min-height: auto;
  }
}


@media (max-width: 520px) {

  .hero,
  .page-hero,
  .services-hero {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }


  .intro {
    padding-top: 4rem;
    padding-bottom: 5rem;
  }


  .contact {
    padding:
      2rem
      1.5rem;
  }
}