/* /pain-au-chocolat.html */

.pac .top, .pac .filter, .pac #reviews, .pac .filter-empty { margin-left: var(--gutter); margin-right: var(--gutter) }
.pac #about { max-width: 48em; margin: 0 }
.pac #about .page-intro { margin: 1.6em 0 .9em }

/* intro on the left, one "life is pain au chocolat" picture on the right */
.pac .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 2em }
.pac .life-is-pain { flex: none; width: clamp(10rem, 22vw, 16rem); margin: .4em 0 0 }
.pac .life-is-pain a { display: none; border: 0 }
.pac .life-is-pain a.on { display: block }
.pac .life-is-pain a:hover { background: none }
.pac .life-is-pain img { display: block; width: 100%; height: auto; transform: rotate(1.5deg); box-shadow: 0 1px 6px rgba(0, 0, 0, .18) }

/* five stars; --r (0-5, halves allowed) sets how many are filled. Empty
   ones are outlines, filled ones solid: told apart by their shape, and both
   clear against the page (3:1 or more) */
.pac .stars {
  position: relative;
  display: inline-block;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--muted);
  white-space: nowrap;
}
.pac .stars::before { content: "☆☆☆☆☆" }
.pac .stars::after {
  content: "★★★★★";
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--r) / 5 * 100%);
  overflow: hidden;
  color: #b07800;
}
@media (prefers-color-scheme: dark) {
  .pac .stars::after { color: #d99a00 }
}
.pac .unrated { font: .75em var(--caption); color: var(--muted) }

.pac .legend {
  list-style: none;
  margin: .6em 0 0;
  padding: 0;
  font: .78em var(--caption);
  color: var(--muted);
}
.pac .legend li { padding: .1em 0 }
.pac .legend .stars { font-size: 1.1em; margin-right: .5em }

/* ---- filter and sort (the filter's look in common.css) -------------------- */
.pac .filter {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: .6em 0;
  margin-top: 1.2em;
  background: var(--bg);
}
.pac .sort { margin-left: auto; color: var(--muted); white-space: nowrap }
.pac .sort button {
  font: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--muted);
  padding: 1px 0;
  margin-left: .6em;
  cursor: pointer;
}
.pac .sort button[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: transparent; padding: 1px .35em }

/* ---- reviews --------------------------------------------------------------- */
.pac #reviews {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17em, 1fr));
  gap: 1.6em 2em;
  margin-top: 1em;
  margin-bottom: 4em;
}
/* best first from the first paint, without waiting for the script: the higher
   the rating, the earlier (among equals, the order of the page); "by date"
   (class by-date, pain-au-chocolat.js) is the order of the page */
.pac .review[data-rating="5"]   { order: -10 }
.pac .review[data-rating="4.5"] { order: -9 }
.pac .review[data-rating="4"]   { order: -8 }
.pac .review[data-rating="3.5"] { order: -7 }
.pac .review[data-rating="3"]   { order: -6 }
.pac .review[data-rating="2.5"] { order: -5 }
.pac .review[data-rating="2"]   { order: -4 }
.pac .review[data-rating="1.5"] { order: -3 }
.pac .review[data-rating="1"]   { order: -2 }
.pac .review[data-rating="0.5"] { order: -1 }
.pac #reviews.by-date .review   { order: 0 }
.pac .review[hidden] { display: none }
.pac .review { min-width: 0; border-top: 1px solid var(--line); padding-top: .8em }
.pac .review h2 { margin: 0 0 .15em; font-size: 1.35em; line-height: 1.2 }
.pac .rating { margin: 0 0 .1em; font-size: 1.05em }
.pac .meta { margin: 0 0 .6em; font: .75em var(--caption); color: var(--muted) }
.pac .tag {
  display: inline-block;
  margin-left: .4em;
  padding: 0 .5em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--fg);
}

/* photo strip: scrolls sideways when it has more photos than fit */
.pac .pics {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.pac .pics a { flex: none; border: 0; padding: 0; line-height: 0 }
.pac .pics a:hover { background: none }
.pac .pics img {
  height: 96px;
  width: auto;
  border-radius: 3px;
  transition: opacity .15s ease;
}
.pac .pics a:hover img { opacity: .85 }

@media (max-width: 600px) {
  body.pac { --gutter: 5% }
  .pac .sort { margin-left: 0; flex-basis: 100% }
  .pac .top { flex-direction: column; gap: 1.2em }
  .pac .life-is-pain { width: min(11rem, 50%); align-self: center }
  .pac .pics img { height: 84px }
}

/* ---- photo viewer (dialog) ------------------------------------------------- */
html.viewer-open { overflow: hidden }
#viewer {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .94);   /* on the dialog itself: covers the page even where ::backdrop is not painted */
  color: #eee;
}
#viewer::backdrop { background: transparent }
#viewer:focus { outline: none }   /* static/viewer.js focuses the dialog, for the arrow keys */
#viewer figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6em;
  height: 100%;
  margin: 0;
  padding: 3em 1em 1.2em;
  box-sizing: border-box;
}
#viewer img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 6em);
  width: auto;
  height: auto;
  min-width: min(60vw, 600px);   /* the small thumbnail is shown scaled up while the photo loads */
  object-fit: contain;
  border-radius: 3px;
  transition: filter .2s ease;
}
#viewer img.loading { filter: blur(6px) }
#viewer figcaption { font: .8em var(--caption); color: #bbb }
#viewer button {
  position: absolute;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  font: 1.6em/1 var(--caption);
  cursor: pointer;
}
#viewer button:hover { background: rgba(255, 255, 255, .2) }
#viewer .close { top: .4em; right: .4em }
#viewer .nav { top: 50%; transform: translateY(-50%) }
#viewer .prev { left: .4em }
#viewer .next { right: .4em }
#viewer.single .nav { display: none }
@media (max-width: 600px) {
  #viewer figure { padding: 3em .4em 1em }
  #viewer img { min-width: 0; width: 100% }
  #viewer .nav { top: auto; bottom: .6em; transform: none; font-size: 1.3em }
}