/* politicians-frontend.css — updated: card margins + fixed thumbnail sizes (governor still fluid) */

/* ---------- variables & reset ---------- */
:root{
  --content-width:1100px;
  --card-bg:#fff;
  --muted:#777;
  --accent:#f5b301;
  --card-border:#eee;
  --gap:18px;
  --radius:10px;
  --pf-card-bottom-gap: 18px;   /* desktop gap under each card */
  --pf-card-bottom-gap-mobile: 12px; 
  --pf-card-margin: 12px;           /* outer margin for cards (applies to all sides) */
  --pf-section-bottom: 28px; 

  /* thumbnail size used for non-governor cards */
  --thumb-size:140px;
}

/* basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#222;background:#fafafa;-webkit-font-smoothing:antialiased}

/* ---------- page layout ---------- */
.pf-container{padding:28px 16px}
.pf-inner{max-width:var(--content-width);margin:0 auto}

/* ---------- Governor block (unchanged — fluid large image) ---------- */
.pf-governor{
  display:flex;
  gap:22px;
  align-items:stretch;
  background:var(--card-bg);
  padding:20px;
  border-radius:var(--radius);
  border:1px solid var(--card-border);
  box-shadow:0 1px 6px rgba(20,20,30,0.03);
}
.pf-gov-media{flex:0 0 360px; display:flex; align-items:stretch}
.pf-gov-media img.pf-gov-photo{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}
.pf-gov-content{flex:1;display:flex;flex-direction:column}
.pf-gov-name{margin:0 0 6px;font-size:22px;line-height:1.15;word-break:break-word}
.pf-meta{font-size:14px;color:#555;margin-bottom:8px}
.pf-bio{margin-top:12px;font-size:15px;line-height:1.6;color:#333;white-space:normal;word-break:break-word}

/* ---------- rating / stars ---------- */
.pf-gov-rating,.pf-rating{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.pf-stars{display:inline-flex;gap:8px;align-items:center;user-select:none}
.pf-star{background:transparent;border:0;font-size:22px;color:#d1d1d1;cursor:pointer;padding:0;line-height:1;transition:color .12s, transform .06s}
.pf-star:active{transform:translateY(1px)}
.pf-star:hover,.pf-star.pf-filled{color:var(--accent)}
.pf-stars.pf-disabled{opacity:0.6;pointer-events:none}
.pf-just-voted{color:#168a16;margin-left:8px;font-weight:600;font-size:13px}
.pf-rating-summary{font-size:13px;color:#444;display:inline-block}

/* ---------- main grid & cards (fewer items per row) ---------- */
.pf-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap:var(--gap);
  align-items: stretch;
}

/* allow grid items to fill their row height */
.pf-grid > * { height:100%; }

/* card: add margin outside, keep equal-height behavior */
.pf-card{
  display:flex;
  gap:16px;
  align-items:stretch;
  padding:18px;
  border-radius:10px;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:0 1px 4px rgba(20,20,30,0.03);
  height:100%;
  overflow:visible;
  margin:8px;
}

/* When cards have margin we may want the container to slightly compensate:
   optional: uncomment if you want negative outer spacing:
.pf-inner { margin-left: -8px; margin-right: -8px; }
*/

/* thumbnail column: fixed square size for non-governor cards */
.pf-card-thumb{
  flex:0 0 var(--thumb-size);
  display:flex;
  align-items:stretch;
}
.pf-card-thumb img{
  width:var(--thumb-size);
  height:var(--thumb-size);
  object-fit:cover;
  border-radius:8px;
  display:block;
}

/* body: column that expands to fill card height */
.pf-card-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  min-width:0;
}

/* full name: allow wrapping, no truncation */
.pf-card-title{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.2;
  word-break:break-word;
  white-space:normal;
  overflow:visible;
}

/* full bio: no clamping */
.pf-card-fullbio, .pf-card-excerpt {
  margin:8px 0;
  color:#444;
  font-size:15px;
  line-height:1.6;
  overflow:visible;
  white-space:normal;
}

/* pin rating area to bottom so all ratings in a row align */
.pf-card-body .pf-rating,
.pf-card-body .pf-gov-rating { margin-top: auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- House of Assembly list (no images) ---------- */
.pf-assembly-list{
  margin-top:12px;
  background:var(--card-bg);
  padding:12px;
  border-radius:8px;
  border:1px solid var(--card-border);
}
.pf-assembly-list ul{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:10px;
}
.pf-assembly-list li{
  padding:12px;border-radius:6px;border:1px solid #f0f0f0;background:#fff;
  display:flex;flex-direction:column;gap:8px;height:100%;justify-content:space-between;
}

/* small meta */
.pf-small{font-size:13px;color:#555;margin-bottom:6px}

/* stars style & instruction text */
.pf-star {
  font-size: 26px; /* make star big enough */
  line-height: 1;
  padding: 4px;
  color: #d1d1d1; /* default (unfilled) */
  background: transparent;
  border: none;
  cursor: pointer;
}
.pf-star .pf-star-icon, .pf-star-icon {
  pointer-events: none;
  display:inline-block;
  vertical-align: middle;
}
.pf-star.pf-filled, .pf-star:hover, .pf-star:focus {
  color: var(--accent);
}
.pf-instruction {
  font-size:14px;
  color:#555;
  font-weight:600;
  margin-left:10px;
  font-style:normal;
}

/* keep the rating summary spacing tidy after adding the "Thanks" message */
.pf-rating-summary .pf-just-voted { margin-left:10px; display:inline-block; font-weight:600; color:#168a16; }

/* "Rate your representative" helper text */
.pf-rate-instruction {
  width: 100%;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-top: 10px;
  display: block;
}

/* Slightly reduce spacing on very small screens */
@media (max-width:700px) {
  .pf-rate-instruction {
    width: 100%;
    font-size: 13px;
    margin-top: 8px;
  }
}

/* ---------- governor responsiveness & grid adjustments ---------- */
@media (max-width:1100px){
  .pf-gov-media{flex:0 0 320px}
  .pf-grid{grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));}
  :root{ --thumb-size:120px; }
  .pf-card-thumb{flex:0 0 120px}
  .pf-card-thumb img{width:120px;height:120px}
}

@media (max-width:900px){
  .pf-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  :root{ --thumb-size:120px; }
}

/* small screens: stack governor vertically and single-column grid */
@media (max-width:700px){
  .pf-governor{flex-direction:column;align-items:stretch}
  .pf-gov-media{flex:0 0 auto;width:100%}
  .pf-gov-media img.pf-gov-photo{height:260px;object-fit:cover}
  .pf-grid{grid-template-columns:1fr}
  .pf-card{padding:12px;gap:12px}
  :root{ --thumb-size:100px; }
  .pf-card-thumb{flex:0 0 100px}
  .pf-card-thumb img{width:100px;height:100px}
  .pf-container{padding:18px 12px}
  .pf-assembly-list ul{grid-template-columns:1fr}
  .pf-assembly-list li{min-height:auto}
}

/* ---------- focus / accessibility ---------- */
.pf-star:focus{outline:2px solid #ddd;outline-offset:2px}
a.pf-link, .pf-card a{color:inherit}
.pf-card-body, .pf-card-title, .pf-card-fullbio{word-break:break-word}

/* small visual tweaks */
.pf-section-title{font-size:20px;margin:18px 0 12px}
.pf-card .pf-card-excerpt small{color:var(--muted)}

/* fallback min-height for very old browsers */
.pf-grid > * { min-height: 140px; }

/* Ensure cards have uniform outer margin (override previous margin if present) */
.pf-card {
  margin: var(--pf-card-margin);
  /* keep previous internal padding & styles — only outer spacing is changed */
}

/* Extra bottom spacing specifically (safe redundancy) */
.pf-card {
  margin-bottom: var(--pf-card-margin);
}

/* Add bottom margin (vertical separation) to main sections */
.pf-governor,
.pf-grid,
.pf-assembly-list,
.pf-section-title,
.pf-container > h3 {
  margin-bottom: var(--pf-section-bottom);
}

/* If you want section heading spacing slightly smaller than grids */
.pf-section-title { margin-bottom: calc(var(--pf-section-bottom) * 0.6); }

/* Optional: if you added negative container compensation earlier, keep it in sync */
/* .pf-inner { margin-left: calc(var(--pf-card-margin) * -1); margin-right: calc(var(--pf-card-margin) * -1); } */

.pf-card {
  margin-bottom: var(--pf-card-bottom-gap) !important;
}

/* reduce gap on small screens */
@media (max-width:700px) {
  .pf-card {
    margin-bottom: var(--pf-card-bottom-gap-mobile) !important;
  }
}