/* DupeEats · community-base.css (A11 §4.3): the parts of community.css that
   are visible before any tap: gallery grid and credits, report links, the
   "Show off your dupe" links of the rating block, the recipe byline, the
   photo credit and the cook page. Head stylesheet where community.css loads on
   intent (recipe, debate, drop and cook pages). The same rules stay in
   community.css (on intent there; a normal stylesheet on /submit-a-dupe/), so
   a duplicate load changes nothing. Forms, picker and dialogs: community.css. */

/* ---------- gallery ---------- */
.community-gallery { padding-top: var(--s-7); }
.cg-head { align-items: flex-start; }
.cg-sub { margin-top: var(--s-1); color: var(--ink-2); }
.cg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.cg-item[hidden] { display: none; }
.cg-open { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); }
.cg-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease-out); }
.cg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-top: var(--s-2); font-size: var(--fs-sm); }
.cg-credit { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.credit-name { font-weight: 700; color: var(--ink); }
a.credit-name { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.credit-social { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px 0; color: var(--ink-2); border-radius: 50%; }
.credit-social:hover { color: var(--ink); background: var(--sunken); }
.cg-more, .cg-add { margin-top: var(--s-5); }
.cg-more + .cg-add { margin-left: var(--s-2); }
.cg-more-note { margin-top: var(--s-2); }
.cg-empty { padding: var(--s-5); border-radius: var(--r-md); background: var(--bg); color: var(--ink-2); max-width: 60ch; }

/* report links */
.report-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.report-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.report-line { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--ink-2); }

/* rating block links, byline, photo credit */
.rate-add-photo { margin-top: var(--s-3); }
.rate-cooked, .rate-photos { margin-top: var(--s-3); font-size: var(--fs-sm); }
.rate-cooked .link-btn { min-height: 44px; }
.recipe-by { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--ink-2); display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; }
.photo-credit { position: absolute; left: var(--s-3); bottom: var(--s-3); display: block; line-height: 28px; max-width: calc(100% - 24px); padding: 2px var(--s-2); border-radius: 6px; background: var(--surface); font-size: var(--fs-xs); font-weight: 600; }
.photo-credit .credit-social { width: 28px; height: 28px; margin: 0 -4px 0 0; vertical-align: middle; }

/* ---------- cook page ---------- */
.cook-head { display: flex; gap: var(--s-4); align-items: flex-start; margin-bottom: var(--s-7); }
.cook-avatar { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--lime); font-size: var(--fs-xl); font-weight: 700; }
.cook-head h1 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); letter-spacing: -0.025em; }
.cook-role { margin-top: var(--s-1); color: var(--ink-2); }
.cook-facts { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); font-size: var(--fs-sm); font-weight: 600; align-items: center; }
.cook-social { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--cobalt); }
.cook-section + .cook-section { margin-top: var(--block-gap); }
.cook-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
.cook-photo__img { display: block; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); }
.cook-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.cook-photo__on { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.cook-photo__on a { color: var(--ink); font-weight: 700; }
.cook-report { margin-top: var(--s-7); }
.cook-share { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.cook-share__btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); font-size: var(--fs-sm); }

@media (hover: hover) { .cg-open:hover img { transform: scale(1.04); } }
@media (min-width: 761px) {
  .cg-grid, .cook-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-open img { transition: none; }
}
.cg-add[aria-expanded="true"] { display: none; }