/* Gallery (Stylish Portfolio): the loud yellow/teal bands and pencil photos made an exhibition
   page look like a stationery shop. Neutral surfaces, the theme accent, and illustrations. */
body {
  color: var(--aii-ink);
}

.masthead {
  min-height: 78vh !important;
  /* Not !important: the owner's cover photo is applied inline and must still win. */
  background-image: linear-gradient(180deg, rgba(20, 24, 32, 0.15), rgba(20, 24, 32, 0.55)),
    url("/v1/template-assets/aii-common/gallery-masthead-1.svg");
  background-position: center !important;
  background-size: cover !important;
}

.masthead h1 {
  color: #fff;
  font-size: clamp(2.6rem, 11vw, 4.5rem) !important;
}

.masthead h3 {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem !important;
  font-weight: 500 !important;
}

.masthead h3 em {
  font-style: normal;
}

.content-section {
  padding: 3.75rem 0 !important;
}

.content-section-heading h3 {
  font-size: 0.95rem !important;
  color: var(--aii-accent-text) !important;
}

.content-section-heading h2 {
  font-size: clamp(1.7rem, 7vw, 2.4rem) !important;
}

#services.bg-primary {
  background-color: #1f2530 !important;
}

.service-icon {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.callout {
  padding: 5rem 0 !important;
  background-image: linear-gradient(180deg, rgba(20, 24, 32, 0.25), rgba(20, 24, 32, 0.55)),
    url("/v1/template-assets/aii-common/gallery-callout-1.svg");
  background-size: cover !important;
}

.callout h2 {
  color: #fff;
  font-size: clamp(1.7rem, 7.5vw, 2.6rem) !important;
}

.callout h2 em {
  font-style: normal;
  color: #fff;
  box-shadow: inset 0 -0.35em 0 var(--aii-accent);
}

.portfolio-item {
  overflow: hidden;
  border-radius: var(--aii-radius-lg);
  margin-bottom: 1rem !important;
}

.portfolio-item .caption {
  background: linear-gradient(180deg, rgba(20, 24, 32, 0) 30%, rgba(20, 24, 32, 0.72)) !important;
}

.portfolio-item .caption .caption-content {
  align-self: flex-end;
  padding: 1.25rem !important;
  text-align: left;
}

.portfolio-item .caption .caption-content h2 {
  font-size: 1.25rem !important;
}

.portfolio-item .caption .caption-content p {
  font-size: 0.95rem !important;
}

.content-section.bg-primary:not(#services) {
  background-color: var(--aii-accent) !important;
}

.footer {
  padding: 3rem 0 !important;
}

.social-link {
  background-color: #1f2530 !important;
}

/* The services band is always dark here, whatever the theme: keep its text light even when a
   light theme (amber) switches accent surfaces to dark text. */
#services.bg-primary,
#services.bg-primary .text-white,
#services .content-section-heading h2 {
  color: #fff !important;
}

#services .content-section-heading h3 {
  color: rgba(255, 255, 255, 0.72) !important;
}