/* Article card component (.story-card) — the photo-over-text card used on the
   Stories archive, the Places results and the contributor profile pages. Moved
   verbatim from the former monolithic style.css (Phase 1: no rule was edited).
   Shared with other components and therefore left in styles/global.css:
   .story-tags, .story-meta, .card-meta, .sec-link, [data-filter-theme] / [data-state]
   transitions and the .archive-grid layout. */

  .story-card .img{position:relative;aspect-ratio:5/4;overflow:hidden;margin-bottom:18px;background:var(--border);}
  .story-card .img img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease;}
  .story-card:hover .img img{transform:scale(1.03);}
  .card-img-link{display:block;width:100%;height:100%;}

  .story-card{min-width:0;}
  .story-card .story-tags{flex-wrap:wrap;gap:2px 16px;margin-bottom:10px;}
  /* The share button's hit area uses -4px margins, so its box reaches 4px past the row.
     This bottom padding brings that reach inside the card's own height, so the grid row
     (and the gap to the next row) is measured from the true bottom of the card. */
  .story-card .card-meta{padding-bottom:4px;}
  .story-card h3{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.28;color:var(--heading);margin-bottom:18px;letter-spacing:-0.005em;}
  .story-card h3 a{color:inherit;transition:color .25s ease;}
  .story-card:hover h3 a,.story-card h3 a:focus-visible{color:var(--accent);}

  /* Byline (contributor avatar + name + date) and the bottom row (read time + share). */
  .card-byline{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
  .card-avatar{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--accent);color:#FFFFFF;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.02em;}
  .card-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
  .card-author{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .card-author-name{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.3;color:var(--heading);}
  .card-date{font-family:var(--sans);font-size:13px;line-height:1.3;color:#8a8d93;}
  .card-share{display:inline-flex;padding:4px;margin:-4px;background:none;border:0;font:inherit;color:#8a8d93;cursor:pointer;transition:color .2s ease;}
  .card-share svg{transition:transform .25s ease;}
  .story-card:hover .card-share svg{transform:translateX(2px);}
  .card-share:hover,.card-share:focus-visible{color:var(--accent);}

  /* Share popup — one <dialog> built once by initCardShare() in main.js. */
  .share-dialog{width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 32px);margin:auto;padding:0;border:1px solid var(--border);background:var(--surface);color:var(--heading);}
  .share-dialog::backdrop{background:rgba(20,18,14,.55);}
  /* Open: fade + 12px rise. Close (.is-closing, set by closeDialog() in main.js): the same motion reversed. */
  .share-dialog[open]{animation:ghShareIn .28s cubic-bezier(.22,.61,.36,1) both;}
  .share-dialog[open]::backdrop{animation:ghShareFadeIn .28s ease both;}
  .share-dialog.is-closing{animation:ghShareOut .26s cubic-bezier(.4,0,.6,1) both;}
  .share-dialog.is-closing::backdrop{animation:ghShareFadeOut .26s ease both;}
  @keyframes ghShareIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
  @keyframes ghShareOut{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(12px);}}
  @keyframes ghShareFadeIn{from{opacity:0;}to{opacity:1;}}
  @keyframes ghShareFadeOut{from{opacity:1;}to{opacity:0;}}
  .share-dialog-inner{position:relative;padding:26px 22px 20px;}
  .share-close{position:absolute;top:10px;right:12px;width:32px;height:32px;padding:0;background:none;border:0;font-size:26px;line-height:1;color:#8a8d93;cursor:pointer;transition:color .2s ease;}
  .share-close:hover,.share-close:focus-visible{color:var(--heading);}
  .share-heading{font-family:var(--sans);font-weight:700;font-size:18px;line-height:1.3;color:var(--heading);margin:0 30px 6px 4px;}
  .share-story{font-family:var(--serif);font-size:14px;line-height:1.45;color:var(--body);margin:0 4px 16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .share-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;}
  .share-option{--brand:var(--accent);display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;padding:12px 2px;background:none;border:0;font:inherit;color:var(--body);text-decoration:none;cursor:pointer;}
  .share-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
  .share-icon{display:block;width:24px;height:24px;color:#8a8d93;transition:color .2s ease;}
  .share-icon svg{display:block;width:100%;height:100%;}
  .share-label{font-family:var(--sans);font-weight:600;font-size:11.5px;line-height:1.2;text-align:center;}
  .share-option:hover .share-icon,.share-option:focus-visible .share-icon{color:var(--brand);}
  .share-option[data-share="whatsapp"]{--brand:#25D366;}
  .share-option[data-share="facebook"]{--brand:#1877F2;}
  .share-option[data-share="x"]{--brand:var(--heading);}
  .share-option[data-share="linkedin"]{--brand:#0A66C2;}
  .share-option[data-share="telegram"]{--brand:#26A5E4;}
  .share-option[data-share="reddit"]{--brand:#FF4500;}
  :root[data-theme="dark"] .share-option[data-share="facebook"]{--brand:#4599FF;}
  :root[data-theme="dark"] .share-option[data-share="linkedin"]{--brand:#71B7FB;}
  .share-option[data-share="instagram"]:hover .share-icon path,.share-option[data-share="instagram"]:focus-visible .share-icon path{fill:url(#ghInstaGrad);}
  .share-copy-row{margin-top:10px;padding-top:6px;border-top:1px solid var(--border);}
  .share-copy{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 4px;}
  .share-copy .share-label{font-size:13px;}
  .share-status{min-height:18px;margin:8px 4px 0;font-family:var(--sans);font-size:12.5px;color:var(--nature);}

  @media (prefers-reduced-motion:reduce){
    .story-card .img img,.card-share svg,.story-card h3 a,.share-icon{transition:none;}
    .share-dialog[open],.share-dialog[open]::backdrop,.share-dialog.is-closing,.share-dialog.is-closing::backdrop{animation:none;}
    .story-card:hover .img img,.story-card:hover .card-share svg{transform:none;}
  }

  .featured-tag{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF;background:var(--accent);padding:2px 8px;margin-right:8px;}
  .story-card .img .featured-tag{position:absolute;top:14px;left:14px;margin:0;z-index:1;}

/* RESULTS — reuses .archive-grid/.story-card as-is (see stories.html)
   so an article looks the same wherever it's browsed from. The only
   addition is a small breadcrumb line giving the state/city/village
   this particular dispatch is filed under. */
.place-breadcrumb{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.03em;color:#9a9d94;margin-bottom:10px;}
.place-breadcrumb span{margin:0 6px;opacity:.6;}

/* STORIES BY CONTRIBUTORS — one addition to .story-card: a byline. */
.story-byline{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--accent);margin:-10px 0 16px;}