/* Page composition for the contacts example (Slowburn offices). Shared Slowburn styles come from
   slowburn.css; the map and office list are the maps component. */
@layer page {
  .sc-hero { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: 6rem; align-items: center; padding-block: 8rem 6rem; }
  .sc-hero h1 { font-size: 6.4rem; line-height: 1.05; }
  .sc-neon { justify-self: start; padding: .4rem 1.6rem; border: .25rem solid var(--neon); border-radius: .8rem; color: var(--neon); font-family: var(--font-display, var(--font)); font-size: 2rem; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 0 .8rem var(--neon); box-shadow: 0 0 1.2rem color-mix(in srgb, var(--neon) 50%, transparent), inset 0 0 1rem color-mix(in srgb, var(--neon) 30%, transparent); }
  .sc-sloth { display: block; inline-size: 100%; block-size: auto; }
  .rd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin-block-start: 5rem; }
  .rd-card { position: relative; display: grid; align-content: start; gap: 1.2rem; min-block-size: 22rem; padding: 3.6rem 2.2rem 2.4rem; background: var(--card-paper); color: var(--card-ink); border-radius: 0 .6rem .6rem .6rem; box-shadow: 0 .8rem 1.6rem color-mix(in srgb, var(--city) 35%, transparent); }
  .rd-card:nth-child(odd) { transform: rotate(-1.5deg); }
  .rd-card:nth-child(even) { transform: rotate(1.2deg) translateY(1.2rem); }
  .rd-card::before { content: ''; position: absolute; inset-inline: 0; inset-block-start: 2.4rem; border-block-start: .15rem solid color-mix(in srgb, var(--stamp) 50%, transparent); }
  .rd-tab { position: absolute; inset-block-start: -2.4rem; inset-inline-start: 0; padding: .4rem 1.4rem; border-radius: .6rem .6rem 0 0; background: var(--card-paper); color: var(--card-ink); font-family: var(--font-type, monospace); font-size: 1.3rem; letter-spacing: .08em; text-transform: uppercase; }
  .rd-card p:not(.rd-tab) { font-size: 1.6rem; line-height: 1.5; }
  .rd-route { margin-block-start: auto; font-family: var(--font-type, monospace); }
  .rd-route a { color: var(--card-ink); }
  .rd-route address { font-style: normal; }
  .sc-gmap { margin-block-start: 1rem; }
  .sc-gmap summary { cursor: pointer; color: var(--accent); }
  .sc-gmap iframe { display: block; inline-size: 100%; block-size: 30rem; margin-block-start: 1.2rem; border: 0; border-radius: var(--radius); }
  @media (width <= 50em) {
    .sc-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 5rem 4rem; }
    .sc-hero h1 { font-size: 4.6rem; }
    .sc-sloth { inline-size: 55%; justify-self: center; }
    .rd { grid-template-columns: minmax(0, 1fr); gap: 4.4rem; margin-block-start: 4rem; }
    .rd-card { min-block-size: 0; }
    .rd-card p:not(.rd-tab) { font-size: 2.1rem; }
    .rd-tab { font-size: 1.7rem; }
  }
  @media (height <= 30em) {
    .sc-hero h1 { font-size: min(6.4rem, 11vh); }
    .sc-hero { padding-block-start: 2.4rem; }
  }
}