.detail-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.detail-gallery a{display:block;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--soft);}
.detail-gallery a:first-child{grid-column:span 2;grid-row:span 2;}
.detail-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .25s;}
.detail-gallery a:hover img{transform:scale(1.03);}
.detail-video{margin-top:28px;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--surface);}
.detail-video iframe{display:block;width:100%;height:100%;border:0;}
.detail-photo-dialog{border:1px solid var(--line);padding:0;background:var(--surface);color:var(--ink);max-width:min(1100px,94vw);max-height:90dvh;border-radius:24px;overflow:hidden;}
.detail-photo-dialog::backdrop{background:rgba(7,20,17,.82);}
.detail-photo-dialog>img{max-width:100%;max-height:85dvh;object-fit:contain;}
.detail-photo-close{position:absolute;right:14px;top:14px;z-index:1;font-size:28px;background:var(--forest);}
.detail-article-stats{display:flex;flex-wrap:wrap;gap:12px 24px;margin:0 0 24px;color:var(--muted);font-size:14px;}
.detail-article-stats a,.detail-login-prompt a{color:var(--water);}
.detail-comments{display:grid;gap:12px;margin-bottom:24px;}
.detail-comment{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px 22px;}
.detail-comment header{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.detail-comment-avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:linear-gradient(135deg,var(--moss),var(--teal));color:#fff;font-weight:700;flex:none;}
.detail-comment-avatar img{width:100%;height:100%;object-fit:cover;}
.detail-comment time{display:block;font-size:13px;color:var(--muted);}
.detail-comment-delete{margin-left:auto;font-size:13px;color:var(--muted);}
.detail-comment p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;}
.detail-comment-photos{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.detail-comment-photos img{width:100px;aspect-ratio:16/9;object-fit:cover;border-radius:10px;}
.detail-comment-form{display:grid;gap:14px;}
.detail-comment-form .detail-button{justify-self:start;}
.detail-comment-input{display:block;width:100%;min-height:130px;resize:vertical;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;}
.detail-form-error{margin:0;color:#f0a283;}
.detail-section{padding-bottom:72px;}
.detail-section:last-child{padding-bottom:0;}
.detail-section h2{font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 24px;}
.detail-section-intro{margin:0 0 28px;color:var(--muted);font-size:17px;}
.detail-panel{padding:22px;}
.detail-panel h3{margin:0 0 18px;font-size:19px;letter-spacing:-.02em;}
@media (max-width:720px){
.detail-section{padding-bottom:56px;}
.detail-panel{padding:18px;}
.detail-gallery{grid-template-columns:repeat(2,minmax(0,1fr));}
.detail-gallery a:first-child{grid-row:auto;}
.detail-comment{padding:18px;}
}
@media (prefers-reduced-motion:reduce){
.detail-gallery img{transition:none;}
}
.detail-share-button{font:inherit;}
.detail-share-button:disabled{opacity:.6;cursor:wait;}
.detail-share-status{font-size:14px;margin:16px 0 0;color:var(--sand);}
.detail-share-fallback{margin-top:14px;max-width:520px;}
.detail-share-fallback label{display:block;font-size:14px;margin-bottom:6px;}
.detail-share-fallback input{width:100%;padding:10px 14px;border:1px solid rgba(255,255,255,.3);border-radius:12px;background:var(--forest);color:#fff;font:inherit;}

/* Shared detail components. */
/* Buttons */
.detail-action,
.detail-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 999px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  background: var(--teal);
  border: 0;
}
/* Fish button hover */
.detail-action:hover,
.detail-button:hover {
  background: var(--forest);
}
/* Primary buttons */
.detail-action-forest {
  background: var(--forest);
  border: 0;
}
/* Primary button hover */
.detail-action-forest:hover {
  background: var(--teal);
}
/* Glass buttons */
.detail-action-glass {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(8px);
}
/* Glass button hover */
.detail-action-glass:hover {
  background: rgba(255,255,255,.26);
}
/* Sand buttons */
.detail-action-sand {
  background: var(--sand);
  color: #2a2410;
}
/* Sand button hover */
.detail-action-sand:hover {
  background: #d8c493;
}
/* Hero */
.detail-hero {
  min-height: 600px;
  background: var(--forest);
}
/* Hero backgrounds */
.detail-hero-bg {
  position: absolute;
  inset: 0;
}
/* Hero images */
.detail-hero-bg img,
.detail-hero-bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hero content */
.detail-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 104px;
}
/* Hero titles */
.hero .detail-hero-title {
  font-size: clamp(38px,5.6vw,76px);
  line-height: 1.02;
  max-width: 14ch;
  overflow-wrap: anywhere;
}
/* Article hero titles */
.hero .detail-hero-title-article {
  font-size: clamp(34px,4.6vw,64px);
  overflow-wrap: anywhere;
}
/* Breadcrumbs */
.detail-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  margin-bottom: 22px;
}
/* Breadcrumb links */
.detail-crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Hero actions */
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Characteristic strips */
.detail-strip {
  position: relative;
  z-index: 5;
  margin-top: -64px;
}
/* Characteristic grids */
.detail-strip-inner {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: 0 24px 60px -24px rgba(15,42,36,.35);
  overflow: hidden;
}
/* Characteristic cells */
.detail-strip-inner>div {
  padding: 22px 26px;
  border-right: 1px solid var(--line);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Last characteristic cell */
.detail-strip-inner>div:last-child {
  border-right: 0;
}
/* Characteristic labels */
.detail-strip small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 4px;
}
/* Characteristic values */
.detail-strip b {
  letter-spacing: -.02em;
  line-height: 1.25;
  font-size: 23px;
}
/* Page columns */
.detail-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 40px;
  margin-top: 72px;
  align-items: start;
}
/* Main columns */
.detail-column {
  min-width: 0;
}
/* Sidebar layout */
.detail-sidebar {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
  min-width: 0;
}
/* Sidebar panels */
.detail-surface {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  min-width: 0;
}
/* Clipped sidebar panels */
.detail-clipped-panel {
  overflow: hidden;
}
/* Sidebar padding */
.detail-side-padding {
  padding: 20px 22px 22px;
  overflow-wrap: anywhere;
}
/* Sidebar headings */
.detail-side-padding h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 14px;
}
/* Mini maps */
.mini-map {
  aspect-ratio: 4/3;
  background: var(--soft);
}
/* Mini map canvas */
.mini-map #map-id {
  width: 100%;
  height: 100%;
  isolation: isolate;
  z-index: 0;
}
/* Prose */
.detail-prose {
  font-size: 18px;
  overflow-wrap: anywhere;
  line-height: 1.7;
}
/* Prose paragraphs */
.detail-prose p {
  margin: 0 0 18px;
}
/* Prose headings */
.detail-prose h2,
.detail-prose h3,
.detail-prose h4 {
  margin: 32px 0 12px;
}
/* Prose images */
.detail-prose img {
  height: auto;
  max-width: 100%;
  border-radius: 16px;
}
/* Photo corners */
.detail-prose-photo img {
  border-radius: 18px;
}
/* Prose embeds */
.detail-prose iframe {
  max-width: 100%;
}
/* Prose tables */
.detail-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}
/* Prose table cells */
.detail-prose td,
.detail-prose th {
  border: 1px solid var(--line);
  padding: 8px;
}
/* Article links */
.post-prose a,
.report-prose a {
  color: var(--water);
  text-decoration: underline;
}
/* Section headings */
.detail-section-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
  align-items: flex-end;
}
/* Section introductions */
.place-section-head .detail-section-intro,
.river-section-head .detail-section-intro,
.report-section-head .detail-section-intro {
  margin: 0;
}
/* Fish grids */
.detail-fish-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
/* Related cards */
.detail-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* Compact fish card padding */
.place-fish-grid .card-body,
.report-catch-grid .card-body {
  padding: 14px 16px 16px;
}
/* Compact fish card titles */
.place-fish-grid .card h3,
.report-catch-grid h3 {
  font-size: 18px;
}
/* Fish links */
.detail-fish-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Sidebar fact lists */
.detail-facts {
  display: grid;
  gap: 10px;
}
/* Sidebar fact rows */
.detail-facts>div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
/* Last sidebar fact row */
.detail-facts>div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Sidebar fact dt */
.detail-facts dt {
  color: var(--muted);
}
/* Sidebar fact dd */
.detail-facts dd {
  font-weight: 600;
  text-align: right;
  margin: 0;
  min-width: 0;
}
/* Sidebar fact a */
.detail-facts a {
  color: var(--water);
}
/* Related section spacing */
.detail-related {
  margin-top: 96px;
}
/* Single gallery image */
.post-detail-content .detail-gallery a:only-child,
.report-main .detail-gallery a:only-child {
  grid-column: 1/-1;
  grid-row: auto;
}
/* Alerts */
.post-detail-page .alert,
.report-detail-page .alert {
  padding: 16px 20px;
  margin-bottom: 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
/* Error alerts */
.post-detail-page .alert-danger,
.report-detail-page .alert-danger {
  color: #f0a283;
}