/* ------------------------------------------------ */
/* Carrara Baby Shower: overrides for the Oomph template.
   Kept in a separate file so a Gulp rebuild of main.css
   never clobbers it. Loaded after main.css. */
/* ------------------------------------------------ */

/* Section photos, replacing the template's remote dummyimage.com
   URLs. .media__image / .mainmedia__image already cover+center them.
   The hero needs no gradient; its .color-layer-medium div does the
   darkening. The other three have no color layer, so the black
   overlay is baked into background-image to keep the white
   copyright line readable over a bright photo. */
.main-image-3 {
  background-image: url("../img/hero.webp");
}
.about-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../img/about.webp");
}
.works-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../img/registry.webp");
}
.contact-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("../img/directions.webp");
}

/* Backstop tone while the photo loads. #5f1616 is the section red
   (#9e2525) as the hero renders it under its 40% black color-layer,
   so all four panels land on the same tone. */
.about-image,
.works-image,
.contact-image {
  background-color: #5f1616;
}

/* The template sized .loader__logo for its 160px image logo. The wordmark
   that replaced it is wider and set to nowrap, so it overflowed the box
   and dragged the whole centred block off to the left. */
.loader__content {
  z-index: 2;
  width: 100%;
  padding: 0 2.4rem;
  text-align: center;
}
.loader__logo {
  width: auto;
}

/* Dickens quote: the template's watermark swapped for the watercolour
   sprig. The flat layer on top is what fades the artwork back behind the
   text; it is .background-mute's own #f5efe3, so it stays invisible
   everywhere the sprig is not. Used once, on the quote block. */
.bg-image-bottom {
  background-image:
    linear-gradient(rgba(245, 239, 227, 0.45), rgba(245, 239, 227, 0.45)),
    url("../img/quote-sprig.webp");
  /* sized against the block, not in rem, so it stays the same relative
     weight on a phone as it does on the half-screen desktop column */
  background-position: center center, bottom -8% right -10%;
  background-size: cover, 100% auto;
}

/* Wordmark in place of the template's "Oomph" logo art */
.logo-text {
  display: block;
  font: normal 400 3.2rem/1 "Great Vibes", cursive;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}
.logo-text:hover {
  color: #ffffff;
}

/* Hero facts line. The template set these in 2rem script type
   because they were social links; an address has to be readable,
   so drop to small caps. */
.main__dataline .socials-text li,
.main__dataline .socials-text li::after {
  font: normal 500 1.2rem/1.8 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.14rem;
  color: rgba(255, 255, 255, 0.75);
}
.main__dataline .socials-text li::after {
  color: rgba(255, 255, 255, 0.3);
}

/* Event Details quick-facts: Font Awesome glyphs replace
   the template's three 70x70 icon images */
.features__icon {
  display: block;
  margin-bottom: 1.6rem;
  font-size: 3.2rem;
  color: #9e2525;
}

/* Registry cards: same figure/figcaption shell as the old
   works gallery, minus the PhotoSwipe lightbox */
.registry__item {
  padding: 4rem 3rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  text-align: center;
}
.registry__item:hover .registry__icon {
  -webkit-transform: translateY(-0.4rem);
  transform: translateY(-0.4rem);
}
.registry__icon {
  display: block;
  margin-bottom: 1.8rem;
  font-size: 3.6rem;
  color: #9e2525;
  -webkit-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}
/* The caption text was white for a dark gallery overlay;
   these cards sit on white. */
.registry__item .works-description p {
  color: #444444;
}
.registry__link {
  display: inline-block;
  margin-top: 1.4rem;
  font: normal 600 1.2rem/1 "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.12rem;
  color: #9e2525;
  border-bottom: 1px solid rgba(158, 37, 37, 0.4);
  padding-bottom: 0.4rem;
}
.registry__link:hover {
  color: #0A0A0A;
  border-bottom-color: #0A0A0A;
}

/* Parents-to-be block on charcoal. The template only ships
   white or cream blocks, so the text has to be flipped to light
   to stay readable. */
.inner__block.parents {
  background-color: #383838;
}
.parents h3,
.parents .block__subtitle,
.parents .team__title {
  color: #ffffff;
}
.parents .team__title small,
.parents .team__text {
  color: rgba(255, 255, 255, 0.7);
}

/* One photo of the parents-to-be, shown at its own proportions */
.couple {
  text-align: center;
}
.couple__image {
  width: 100%;
  max-width: 42rem;
  height: auto;
  margin-bottom: 2.4rem;
}