/* The C4 Cookie Directory (/c4/cookies/). Loads after pdxccf-core.css and pdxccf-makers.css (the hero
   comes from the Makers page styles). Cards are little recipe cards: the photo,
   the cookie, the baker. Medal colors and division dots are decoration; the words are always there. */

/* Hero: the tent trophy photo instead of the Makers photo, and shorter so the directory starts sooner. */
.cd-hero::before {
  background:
    linear-gradient(90deg, rgb(33 16 11 / 90%) 0%, rgb(33 16 11 / 58%) 48%, rgb(33 16 11 / 22%) 80%),
    linear-gradient(0deg, rgb(33 16 11 / 70%) 0%, transparent 55%),
    url("../images/c4-results/tent-trophies.jpg") center 58% / cover no-repeat;
}

/* Division and medal colors come from the shared palette in pdxccf-core.css (--division-*, --medal-*). */

/* hero: copy on the left, a rotating featured cookie on the right */
.cd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}

.cd-showcase { position: relative; justify-self: end; width: min(21rem, 100%); }
.cd-showcase[hidden] { display: none; }

.cd-show-btn {
  display: grid;
  width: 100%;
  padding: .7rem .7rem 0;
  border: 0;
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: 0 1.3rem 2.6rem rgb(0 0 0 / 45%);
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .cd-show-btn { transform: rotate(2deg); transition: transform 200ms ease; }
  .cd-show-btn:hover, .cd-show-btn:focus-visible { transform: rotate(0); }
}

.cd-show-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* every slide sits in the same grid cell, so the frame never changes size while they crossfade */
.cd-show-slide { grid-area: 1 / 1; opacity: 0; transition: opacity 900ms ease; pointer-events: none; }
.cd-show-slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cd-show-slide { transition: none; } }

.cd-show-stage { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .6rem; background: var(--paper); }
.cd-show-stage img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* the pills reuse the card pill styles; each slide just supplies its division colour */
.cd-show-slide { --c: var(--division-youth); --c-ink: var(--division-youth-ink); }
.cd-show-slide[data-division="home"] { --c: var(--division-home); --c-ink: var(--division-home-ink); }
.cd-show-slide[data-division="professional"] { --c: var(--division-professional); --c-ink: var(--division-professional-ink); }
.cd-show-stage .cd-medal[hidden] { display: none; }

.cd-show-cap { display: grid; align-content: start; gap: .1rem; min-height: 4.6rem; padding: .7rem .15rem .85rem; }
.cd-show-cookie { font-family: var(--serif); font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.cd-show-baker { color: var(--muted); font-size: .85rem; }

.cd-show-pause {
  position: absolute;
  right: .6rem;
  bottom: .55rem;
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--cocoa-800);
  font-size: .55rem;
  line-height: 1;
  cursor: pointer;
}

.cd-show-pause[aria-pressed="true"] { background: var(--cocoa-900); color: var(--cream); }
.cd-show-pause:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.cd-hero .cd-total { color: var(--orange); font-family: var(--serif); font-weight: 700; }

.cd-hero .cd-hint {
  margin: 1.1rem 0 0;
  color: rgb(255 248 237 / 74%);
  font-size: .95rem;
}

.cd-main { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3.5rem, 8vw, 6rem); background: var(--cream); }

/* ---------- toolbar ---------- */
.cd-toolbar {
  display: grid;
  gap: .9rem;
  margin-bottom: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
}

.cd-toolbar[hidden] { display: none; }

.cd-search input {
  width: 100%;
  padding: .8rem 1rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  text-overflow: ellipsis;
}

.cd-search input:focus { border-color: var(--cocoa-700); outline: none; }

/* one line: Division [chips]  Filter [chips]  count. The groups wrap as whole units when space runs out. */
.cd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.6rem; }
.cd-chip-row { display: flex; align-items: center; gap: .5rem; }
.cd-chip-label { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cd-chips { display: flex; gap: .35rem; }

.cd-chip {
  --c: var(--cocoa-900);
  --c-soft: var(--paper);
  padding: .2rem .75rem;
  border: 1.5px solid var(--c);
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--ink);
  font: inherit;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.cd-chip[data-filter="youth"] { --c: var(--division-youth); --c-ink: var(--division-youth-ink); --c-soft: rgb(155 208 232 / 30%); }
.cd-chip[data-filter="home"] { --c: var(--division-home); --c-ink: var(--division-home-ink); --c-soft: rgb(242 180 140 / 32%); }
.cd-chip[data-filter="professional"] { --c: var(--division-professional); --c-ink: var(--division-professional-ink); --c-soft: rgb(93 50 34 / 12%); }
.cd-chip[data-filter="finalists"] { --c: var(--cocoa-900); --c-ink: var(--cream); --c-soft: rgb(93 50 34 / 12%); }
.cd-chip[data-filter="winners"] { --c: var(--medal-gold-solid); --c-soft: rgb(219 165 26 / 24%); }

.cd-chip:hover { background: var(--c); color: var(--c-ink, var(--ink)); }
.cd-chip[data-filter="all"]:hover { color: var(--cream); }

/* selected: solid colour plus a ring, so it never relies on colour alone */
.cd-chip[data-filter="winners"].is-on { background: var(--medal-gold); }
.cd-chip.is-on { background: var(--c); color: var(--c-ink, var(--ink)); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--cocoa-900); }
.cd-chip[data-filter="all"].is-on { color: var(--cream); }

.cd-count { margin: 0 0 0 auto; color: var(--muted); font-size: .85rem; white-space: nowrap; }

/* ---------- grid + cards ---------- */
.cd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cd-card[hidden] { display: none; }

.cd-link {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr; /* photo, then a text area that takes the leftover height */
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 .2rem .7rem rgb(33 16 11 / 7%);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .cd-card:nth-child(odd) .cd-link { transform: rotate(-.35deg); }
  .cd-card:nth-child(even) .cd-link { transform: rotate(.35deg); }
  .cd-link:hover, .cd-link:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 0 .9rem 1.6rem rgb(33 16 11 / 16%); }
}

.cd-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.cd-photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); }
.cd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.cd-ph {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, #fbe9cf 0, var(--paper) 60%, #efd9bb 100%);
}

.cd-ph-cookie { width: 38%; height: auto; fill: #d8a468; opacity: .75; }
.cd-ph-cookie .chip { fill: var(--cocoa-800); }

.cd-medal {
  position: absolute;
  top: .6rem;
  right: .6rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  color: var(--ink);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgb(255 248 237 / 85%), 0 1px 4px rgb(33 16 11 / 35%);
}

.cd-medal--gold { background: var(--medal-gold); color: var(--medal-gold-ink); }
.cd-medal--silver { background: var(--medal-silver); color: var(--medal-silver-ink); }
.cd-medal--bronze { background: var(--medal-bronze); color: var(--medal-bronze-ink); }

.cd-body { display: grid; align-content: start; gap: .15rem; padding: .85rem 1rem 1rem; }
.cd-cookie { font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; overflow-wrap: anywhere; }
.cd-baker { color: var(--muted); font-size: .88rem; }

/* both pills sit inside the photo: division upper left, winner upper right */
.cd-div {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: var(--c);
  color: var(--c-ink, var(--ink));
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 0 1px rgb(255 248 237 / 85%), 0 1px 4px rgb(33 16 11 / 35%); /* cream edge keeps it visible on dark photos */
}

.cd-card { --c: var(--division-youth); --c-ink: var(--division-youth-ink); }
.cd-card[data-division="home"] { --c: var(--division-home); --c-ink: var(--division-home-ink); }
.cd-card[data-division="professional"] { --c: var(--division-professional); --c-ink: var(--division-professional-ink); }

.cd-empty { margin: 2rem 0 0; padding: 2rem; border: 2px dashed var(--line); border-radius: 1rem; text-align: center; color: var(--muted); }
.cd-empty[hidden] { display: none; }
.cd-credit { margin: 2rem 0 0; color: var(--muted); font-size: .85rem; }
.cd-credit:empty { display: none; }

/* ---------- viewer (lightbox) ---------- */
.cd-viewer {
  width: min(1080px, 100vw);
  max-width: 100vw;
  max-height: 100dvh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 1rem;
  background: var(--cocoa-950);
  color: var(--cream);
  overflow: hidden;
}

.cd-viewer::backdrop { background: rgb(21 10 7 / 82%); }
.cd-viewer[open] { display: block; }

.cd-v-inner { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; padding: 2.75rem .75rem 1rem; }
.cd-v-figure { display: grid; gap: .9rem; margin: 0; min-width: 0; }
.cd-v-stage { display: grid; place-items: center; min-height: 12rem; }
.cd-v-stage img { display: block; max-width: 100%; max-height: 68dvh; margin: 0 auto; border-radius: .6rem; object-fit: contain; }

.cd-v-stage .cd-ph { width: min(24rem, 80vw); height: auto; aspect-ratio: 1 / 1; border-radius: .8rem; color: var(--cocoa-700); }
.cd-v-stage .cd-ph-cookie { width: 30%; }
.cd-v-soon { margin: 0; padding-top: .4rem; color: var(--cocoa-700); font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; position: absolute; bottom: .9rem; }

.cd-v-caption { display: grid; gap: .2rem; justify-items: center; text-align: center; }
.cd-v-cookie { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.2; }
.cd-v-baker { color: rgb(255 248 237 / 82%); }
.cd-v-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin-top: .3rem; }

.cd-v-div {
  padding: .15rem .8rem;
  border-radius: 999px;
  background: var(--c, var(--division-youth));
  color: var(--c-ink, var(--ink));
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cd-viewer[data-division="youth"] { --c: var(--division-youth); --c-ink: var(--division-youth-ink); }
.cd-viewer[data-division="home"] { --c: var(--division-home); --c-ink: var(--division-home-ink); }
.cd-viewer[data-division="professional"] { --c: var(--division-professional); --c-ink: var(--division-professional-ink); }

.cd-v-medal { padding: .15rem .8rem; border-radius: 999px; color: var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.cd-v-medal:empty { display: none; }
.cd-viewer[data-medal="gold"] .cd-v-medal { background: var(--medal-gold); color: var(--medal-gold-ink); }
.cd-viewer[data-medal="silver"] .cd-v-medal { background: var(--medal-silver); color: var(--medal-silver-ink); }
.cd-viewer[data-medal="bronze"] .cd-v-medal { background: var(--medal-bronze); color: var(--medal-bronze-ink); }

.cd-v-close,
.cd-v-nav {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 248 237 / 30%);
  border-radius: 50%;
  background: rgb(255 248 237 / 10%);
  color: var(--cream);
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* the icons are drawn (not text characters), so they sit exactly in the middle of the circle */
.cd-v-ico { display: block; width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.cd-v-close { position: absolute; top: .6rem; right: .6rem; width: 2.5rem; height: 2.5rem; }
.cd-v-nav { width: 3rem; height: 3rem; }
.cd-viewer:focus { outline: none; }
.cd-v-close:hover, .cd-v-nav:hover { background: rgb(255 248 237 / 22%); }
.cd-v-close:focus-visible, .cd-v-nav:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }

@media (max-width: 860px) {
  .cd-hero-grid { grid-template-columns: 1fr; }
  .cd-showcase { justify-self: start; width: min(19rem, 88%); }
}

@media (max-width: 640px) {
  .cd-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .cd-body { padding: .65rem .7rem .8rem; }
  .cd-cookie { font-size: .98rem; }
  .cd-viewer { border-radius: 0; }
  .cd-v-inner { grid-template-columns: 1fr; padding: 2.75rem .75rem 1rem; }
  .cd-v-nav { position: absolute; top: 40%; z-index: 2; width: 2.5rem; height: 2.5rem; }
  .cd-v-prev { left: .4rem; }
  .cd-v-next { right: .4rem; }
}

/* phones: tighter toolbar so the longer search hint fits; each chip group then sits on its own line */
@media (max-width: 480px) {
  .cd-toolbar { padding: .9rem .85rem; }
  .cd-search input { padding-inline: .8rem; }
  .cd-count { margin-left: 0; }
}

/* "Find your favorite" jumps here (the search + filters); keep it clear of the sticky header */
.cd-main { scroll-margin-top: calc(var(--pdxccf-banner-height, 0px) + 4.5rem); }