/* Palette: Rotary's brand colours (Royal Blue, Gold) and neutrals. Change them here. */
:root {
  --blue: #17458f;
  --blue-dark: #0c2d62;
  --gold: #f7a81b;
  --ink: #1d2433;
  --muted: #5a6475;
  --paper: #ffffff;
  --wash: #f3f5f9;
  --rule: #d9dee8;
  --radius: 0.5rem;
  --font: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

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

a { color: var(--blue); }
a:hover { color: var(--blue-dark); }

.wrap {
  max-width: 62rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Header */
.site-header {
  border-bottom: 4px solid var(--gold);
  background: var(--paper);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}
/* The header's geometry matches the auction site's (rotary/community-auction,
   site/styles.css), so the logo and menu stay put moving between the two; a
   change to one is made to both. The club logo, from Rotary's Brand Center:
   Rotary requires clear space the height of its capital R (102 of the 286 px)
   around it, 1.6rem at 4.5rem tall. */
.brand { padding-block: 1.6rem; }
.brand img { display: block; width: auto; height: 4.5rem; }
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.125rem;
}
.site-nav a {
  font-weight: 700;
  text-decoration: none;
  padding: 0.25rem 0;
}
.site-nav a:hover { text-decoration: underline; }
/* Phones: logo and menu stacked and centred, the menu spread across the width
   with 44px tap targets. */
@media (max-width: 36rem) {
  .site-header .wrap { flex-direction: column; gap: 0; }
  .brand { padding-block: 1.6rem 1.05rem; }
  .brand img { height: 5rem; }
  .site-header nav { align-self: stretch; padding-bottom: 0.5rem; }
  .site-nav { justify-content: space-evenly; gap: 0 1rem; font-size: 1.2rem; }
  .site-nav a { display: block; padding: 0.55rem 0; }
}

/* Hero */
.hero {
  color: #fff;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
}
.hero .wrap { padding-block: 4rem 4.5rem; }
.eyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
}
.lead {
  max-width: 38rem;
  margin: 0 0 2rem;
  font-size: 1.25rem;
}
@media (min-width: 50rem) {
  .hero .wrap { display: grid; grid-template-columns: 1fr 22rem; align-items: center; column-gap: 4rem; padding-block: 3rem; }
  .hero .auction-hero { margin: 0; }
}

.button {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius);
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.button:hover { background: #ffbc45; color: var(--ink); }
.button.secondary {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.button.secondary:hover { background: rgb(255 255 255 / 0.12); color: #fff; }

/* Sections */
.band .wrap { padding-block: 3rem; }
.band.alt { background: var(--wash); }
h2 {
  margin: 0 0 1.25rem;
  color: var(--blue);
  font-size: 1.75rem;
}
h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.4rem;
  background: var(--gold);
}
.band p { max-width: 44rem; }

.details { margin: 0; }
.details > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: 0.75rem;
  border-top: 1px solid var(--rule);
}
.details > div:last-child { border-bottom: 1px solid var(--rule); }
.details dt { font-weight: 700; }
.details dd { margin: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--blue);
  border-radius: var(--radius);
  background: var(--paper);
}
.card h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.card p { margin: 0 0 0.4rem; }
.card.feature { border-top-color: var(--gold); background: #fff8ea; }
/* Three across, the grid has six tracks: a card spans two, and the last row's
   two cards (the auction and the one before it) span three each. Two across,
   the auction card takes the whole last row. The queries are against the
   .wrap holding .cards, which is as wide as the grid. */
.wrap:has(> .cards) { container-type: inline-size; }
@container (min-width: 33rem) { .card.feature { grid-column: span 2; } }
@container (min-width: 50rem) {
  .cards { grid-template-columns: repeat(6, 1fr); }
  .card { grid-column: span 2; }
  .card.feature, .card:has(+ .card.feature) { grid-column: span 3; }
}

/* The auction card is one link: the address's ::after covers the card. The
   monster stands at its right with the flat cut across his body (88% of the
   image's height) on the bottom border, his paw hanging over it. He moves
   only with the card, so the cut never leaves the border. */
.card.feature {
  --monster-h: 12rem;
  position: relative;
  min-height: calc(.88 * var(--monster-h) + 1rem);
  padding-right: calc(.59 * var(--monster-h) + 2.5rem);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
@container (max-width: 33rem) { .card.feature { --monster-h: 9.5rem; } }
.card.feature a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.card.feature:hover, .card.feature:focus-within {
  transform: translateY(-.25rem);
  box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .14);
}
.card-monster {
  position: absolute; right: 1.5rem; bottom: calc(-130 / 1083 * var(--monster-h) - 1px);
  width: auto; height: var(--monster-h);
}
@media (prefers-reduced-motion: reduce) { .card.feature { transition: none; } }

/* Footer */
.site-footer {
  color: #dfe6f3;
  background: var(--blue-dark);
  font-size: 1rem;
}
.site-footer .wrap { padding-block: 1.75rem; }
.site-footer p { margin: 0.2rem 0; }
.site-footer a { color: #fff; }
.site-footer p:has(.social) { margin-top: 0.75rem; }

/* A link to a social page, led by that platform's own logo (images/facebook.svg is
   Meta's "f" logo, unaltered: #0866ff with the f in white). */
.social { display: inline-flex; align-items: center; gap: 0.5rem; }
.social img { flex: none; width: 1.5rem; height: 1.5rem; }

.page .wrap { padding-block: 3rem; }

@media (max-width: 34rem) {
  .details > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .hero .wrap { padding-block: 2.5rem 3rem; }
}