/*
Theme Name: PAGKARON News
Theme URI: https://pagkaron.sppagarchive.com
Author: SPPAGARCHIVE Office
Description: Verified public-updates theme for PAGKARON, the SP Archive Office news/records surface. Masthead is a live-HTML clone of the official Sangguniang Panlungsod News & Events banner; the news surface is a dark MSN/Edge-style card feed ported from the Dimataling Gazette build.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: pagkaron
*/

/* ---------- Tokens ---------- */
:root {
  /* masthead — navy from the SP seal ring, orange from the banner */
  --masthead-navy: #0B1E36;
  --masthead-navy-2: #163458;
  --brand-orange: #E2680A;
  --brand-orange-deep: #B84F05;
  --brand-orange-lite: #F5821F;

  /* dark news surface (--mf-* set, carried over from the Gazette feed) */
  --mf-bg: #17181D;
  --mf-page: #101116;
  --mf-card: #24262C;
  --mf-card2: #2B2E35;
  --mf-tx: #ECEEF1;
  --mf-sub: #9AA0A6;
  --mf-gold: #D4AF5C;
  --mf-navy: #4D8FDB;
  --mf-sea: #3EB0C9;
  --mf-leaf: #57B878;
  --mf-red: #E0685E;
  --mf-r: 10px;
  --mf-gap: 12px;

  /* article sheet (dark reading view) */
  --gz-sheet: #1B1E24;
  --gz-tx: #E8ECF1;
  --gz-sub: #A8B0BB;
  --gz-rule: #2E343E;
  --gz-gold: #D4AF5C;
  --gz-gold-hi: #F0D488;

  --white: #FFFFFF;

  --font-serif: "Source Serif 4", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans: "Public Sans", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --radius-sm: 3px;
  --radius-md: 6px;

  --motion-fast: 120ms;
  --motion-ui: 180ms;
  --motion-medium: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mf-page);
  color: var(--mf-tx);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.2; }
p { margin: 0 0 1em; }
button { font: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Fonts (self-hosted) ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

/* ---------- Layout shell ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-6); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--masthead-navy); color: var(--white); padding: var(--space-3) var(--space-4);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mf-gold); outline-offset: 2px; }

.verified-badge { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.75rem; font-weight: 600; color: var(--mf-leaf); }
.verified-badge svg { width: 14px; height: 14px; flex: none; }
.empty-state { padding: var(--space-16) 0; text-align: center; color: var(--mf-sub); }

/* ============================================================================
   MASTHEAD — 1:1 clone of the official "SANGGUNIANG PANLUNGSOD NEWS & EVENTS"
   banner (MastHead.png), rebuilt as live HTML/CSS rather than shipping the flat
   PNG so type stays crisp at any width, the seals keep real alt text, and the
   band reflows on mobile instead of scaling to nothing.
     1. banner   — navy panel + DIAGONAL orange seam against the building photo
     2. features — white strip, 4 icon items + Bisaya motto (home only)
     3. contact  — navy bar, 4 contact items (home only)
     4. navbar   — navy nav strip, every page
   ========================================================================= */
.site-masthead { position: relative; background: var(--masthead-navy); }

/* ---- 1. banner ---------------------------------------------------------- */
.masthead-banner { position: relative; overflow: hidden; background: var(--masthead-navy); min-height: 340px; }
.masthead-banner__photo { position: absolute; inset: 0; z-index: 0; }
.masthead-banner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.masthead-banner__photo-label {
  position: absolute; right: var(--space-4); bottom: var(--space-3); z-index: 1;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
/* navy panel: right edge slants inward as it descends. The orange seam is the
   same shape nudged right, sitting underneath, so only a sliver shows. */
.masthead-banner__panel {
  position: relative; z-index: 2; width: 54%; min-height: inherit;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-8) var(--space-8) var(--space-8) var(--space-12);
  background:
    radial-gradient(120% 90% at 12% 8%, #1B4478 0%, transparent 62%),
    linear-gradient(160deg, #123A6B 0%, #0E2B57 55%, #0A2247 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 74px) 100%, 0 100%);
}
.masthead-banner::before {
  content: ""; position: absolute; z-index: 1; inset: 0; width: 54%; height: 100%;
  background: var(--brand-orange);
  clip-path: polygon(0 0, calc(100% + 13px) 0, calc(100% - 61px) 100%, 0 100%);
}
.masthead-banner__dots {
  position: absolute; left: 0; top: 0; width: 190px; height: 130px; z-index: 1;
  background-image: radial-gradient(rgba(255,255,255,.30) 1.2px, transparent 1.2px);
  background-size: 13px 13px; opacity: .55; pointer-events: none;
}
/* canvas is a replaced element: inset:0 alone leaves it at its intrinsic
   (device-pixel) width, so it must be sized explicitly */
.masthead-banner__motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.masthead-banner__content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  text-decoration: none; color: var(--white);
}
.masthead-banner__seals { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.masthead-banner__seals .seal {
  width: 96px; height: 96px; border-radius: 50%; background: var(--white);
  padding: 4px; box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.masthead-banner__title {
  font-family: var(--font-sans); font-weight: 800; line-height: 0.94;
  font-size: clamp(2rem, 4.1vw, 3.65rem); letter-spacing: -0.005em;
  text-transform: uppercase; color: var(--white); text-shadow: 0 3px 14px rgba(0,0,0,.38);
}
.masthead-banner__subtitle {
  font-family: var(--font-sans); font-weight: 800; line-height: 1;
  font-size: clamp(1.45rem, 2.9vw, 2.6rem); text-transform: uppercase; color: var(--brand-orange-lite);
}
.masthead-banner__stars { color: var(--white); font-size: 0.8rem; letter-spacing: 0.1em; margin-top: var(--space-1); }
.masthead-banner__tags {
  font-size: clamp(0.6875rem, 1.05vw, 0.875rem); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.94);
}
.masthead-banner__kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--brand-orange-lite); margin-top: var(--space-1);
}

/* ---- 2. feature strip (home) -------------------------------------------- */
.masthead-features { background: #F7F7F4; border-top: 3px solid var(--brand-orange); }
.masthead-features__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-top: var(--space-3); padding-bottom: var(--space-3);
}
.masthead-features__grid { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.masthead-features__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding-right: var(--space-4); border-right: 1px solid #D8D8D2;
  font-size: 0.8125rem; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--masthead-navy);
}
.masthead-features__item:last-child { border-right: 0; padding-right: 0; }
.masthead-features__ic { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--white); }
.masthead-features__ic svg { width: 22px; height: 22px; }
.masthead-features__ic--navy { background: var(--masthead-navy); }
.masthead-features__ic--orange { background: var(--brand-orange); }
.masthead-features__quote {
  margin: 0; flex: none; max-width: 300px; text-align: right;
  font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem;
  line-height: 1.4; color: var(--masthead-navy);
}

/* ---- 3. contact bar (home) ---------------------------------------------- */
.masthead-contact { background: var(--masthead-navy); color: rgba(255,255,255,.94); }
.masthead-contact__inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding-top: var(--space-3); padding-bottom: var(--space-3); font-size: 0.8125rem;
}
.masthead-contact__inner span { display: inline-flex; align-items: center; gap: var(--space-2); }
.masthead-contact__inner svg { width: 17px; height: 17px; flex: none; opacity: .95; }

/* ---- 4. nav strip (every page) ------------------------------------------ */
.site-navbar { background: #0A2247; border-top: 1px solid rgba(255,255,255,.10); }
.site-navbar__inner { display: flex; align-items: center; gap: var(--space-3); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.site-nav-toggle {
  display: none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; color: var(--white);
}
.primary-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.primary-nav a {
  display: inline-block; padding: var(--space-2) var(--space-4);
  font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.86);
  transition: background var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard);
}
.primary-nav a:hover, .primary-nav a.is-active { background: var(--brand-orange); color: var(--white); }

/* ---- compact variant: interior pages ------------------------------------ */
.site-masthead--compact .masthead-banner { min-height: 150px; }
.site-masthead--compact .masthead-banner__panel { padding: var(--space-4) var(--space-6) var(--space-4) var(--space-8); }
.site-masthead--compact .masthead-banner__seals { gap: var(--space-3); margin-bottom: 0; }
.site-masthead--compact .masthead-banner__seals .seal { width: 58px; height: 58px; }
.site-masthead--compact .masthead-banner__content { flex-direction: row; align-items: center; gap: var(--space-4); }
.site-masthead--compact .masthead-banner__title { font-size: clamp(1.05rem, 2.1vw, 1.6rem); }
.site-masthead--compact .masthead-banner__subtitle { font-size: clamp(0.8rem, 1.5vw, 1.1rem); }
.site-masthead--compact .masthead-banner__dots { width: 120px; height: 80px; }
.site-masthead--compact .masthead-banner__photo-label { display: none; }

/* ============================================================================
   NEWS FEED — .mf-* dark card feed (MSN/Edge style)
   ========================================================================= */
.mf-feed { background: var(--mf-bg); padding: var(--space-6) 0 var(--space-16); }

/* hero + rail split. align-items:stretch so the rail matches the hero, but the
   hero sizes from its own min-height, never from the rail's content. */
.mf-row { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: var(--mf-gap); align-items: stretch; }

/* ---- hero carousel: pure scroll-snap, no library ------------------------ */
.mf-hero { position: relative; border-radius: var(--mf-r); overflow: hidden; background: var(--mf-card); display: flex; }
.mf-track {
  display: flex; flex: 1; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  min-height: clamp(360px, 34vw, 560px);
}
.mf-track::-webkit-scrollbar { display: none; }
.mf-slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
.mf-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.mf-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,12,18,.06) 34%, rgba(8,10,15,.93) 100%);
}
/* cards are shorter than the hero, so their scrim has to bite sooner and
   harder or the headline lands on unmuted photo detail */
.mf-card .mf-scrim { background: linear-gradient(180deg, rgba(10,12,18,.10) 18%, rgba(8,10,15,.72) 58%, rgba(6,8,12,.96) 100%); }
.mf-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); display: grid; gap: var(--space-2); }
.mf-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.mf-h2 {
  font-size: clamp(19px, 2.4vw, 29px); font-weight: 800; line-height: 1.18;
  color: var(--white); text-wrap: balance; text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.mf-h2 a::after { content: ""; position: absolute; inset: 0; }
.mf-deck { margin: 0; font-size: 13.5px; line-height: 1.5; color: #CFD3D9; max-width: 62ch; }

.mf-prev, .mf-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 56px; display: grid; place-items: center;
  background: rgba(16,18,24,.28); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--mf-r);
  color: var(--white); cursor: pointer;
  transition: background var(--motion-ui) var(--ease-standard);
}
.mf-prev:hover, .mf-next:hover { background: rgba(16,18,24,.62); }
.mf-prev svg, .mf-next svg { width: 20px; height: 20px; }
.mf-prev { left: var(--space-3); }
.mf-next { right: var(--space-3); }
.mf-dots { position: absolute; left: 0; right: 0; bottom: var(--space-2); z-index: 4; display: flex; justify-content: center; gap: 6px; }
.mf-dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255,255,255,.42); cursor: pointer;
  transition: width var(--motion-ui) var(--ease-standard), background var(--motion-ui) var(--ease-standard);
}
.mf-dot.on { width: 22px; background: var(--white); }

/* ---- category chips + source line --------------------------------------- */
.mf-chip {
  display: inline-block; padding: 0.28em 0.7em; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--white); background: #2C5F9E;
}
.mf-chip.navy { background: #2C5F9E; }
.mf-chip.sea  { background: #177A91; }
.mf-chip.leaf { background: #2C7D4D; }
.mf-chip.gold { background: #9A7426; }
.mf-chip.red  { background: #A33227; }
.mf-src { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: #D6DAE0; }
.mf-src img { width: 16px; height: 16px; border-radius: 50%; background: var(--white); flex: none; }
.mf-count {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--white); background: rgba(0,0,0,.55); border-radius: 999px; padding: 0.24em 0.6em;
}
.mf-count svg { width: 12px; height: 12px; }

/* ---- right rail ---------------------------------------------------------- */
.mf-rail { display: grid; gap: var(--mf-gap); align-content: start; }
.mf-top {
  background: var(--mf-card); border-radius: var(--mf-r); padding: var(--space-4);
  border: 1px solid rgba(62,176,201,.55);
  box-shadow: 0 0 14px rgba(62,176,201,.22), inset 0 0 22px rgba(62,176,201,.05);
}
.mf-top-t {
  display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mf-sea);
}
.mf-top-t svg { width: 16px; height: 16px; }
.mf-top li + li { border-top: 1px solid rgba(255,255,255,.08); }
.mf-top a { display: grid; gap: 3px; padding: var(--space-3) 0; }
.mf-tk { font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.mf-tk.navy { color: var(--mf-navy); }
.mf-tk.sea  { color: var(--mf-sea); }
.mf-tk.leaf { color: var(--mf-leaf); }
.mf-tk.gold { color: var(--mf-gold); }
.mf-tk.red  { color: var(--mf-red); }
.mf-tt { font-size: 13px; font-weight: 600; line-height: 1.38; color: var(--mf-tx); }
.mf-top a:hover .mf-tt { color: var(--mf-gold); }

.mf-ads { background: var(--mf-card); border-radius: var(--mf-r); padding: var(--space-4); border-left: 3px solid #1F7A55; }
.mf-ads-t { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mf-sub); margin-bottom: var(--space-2); }
.mf-ad { display: block; padding: var(--space-2) 0; border-top: 1px solid rgba(255,255,255,.07); }
.mf-ad:first-of-type { border-top: 0; }
.mf-ad-txt { display: grid; gap: 2px; }
.mf-ad-tag { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mf-leaf); }
.mf-ad-h { font-size: 13.5px; font-weight: 700; color: var(--mf-tx); }
.mf-ad-l { font-size: 11.5px; color: var(--mf-sub); }
.mf-ad:hover .mf-ad-h { color: var(--mf-gold); }

/* ---- section divider + filters ------------------------------------------ */
.mf-sect {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-8) 0 var(--space-4); padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mf-sect h2 { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mf-tx); }
.mf-sect h2 span { color: var(--mf-sub); font-weight: 600; }
.mf-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-filters a {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: var(--mf-sub); border: 1px solid rgba(255,255,255,.14);
  transition: background var(--motion-ui) var(--ease-standard), color var(--motion-ui) var(--ease-standard);
}
.mf-filters a:hover, .mf-filters a.is-active { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--white); }
.mf-archive-desc { color: var(--mf-sub); max-width: 70ch; }

/* ---- card grid: MSN overlay tiles ---------------------------------------
   The photo IS the card and the headline sits on it. Equal-height rows here
   (not align-items:start) because overlay cards must fill their row for the
   scrim to reach the bottom edge. */
.mf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mf-gap); }
.mf-card {
  position: relative; display: block; min-height: 320px;
  background: var(--mf-card); border-radius: 12px; overflow: hidden;
  transition: transform var(--motion-medium) var(--ease-standard), box-shadow var(--motion-medium) var(--ease-standard);
}
.mf-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.mf-card__media { position: absolute; inset: 0; overflow: hidden; background: var(--mf-card2); }
.mf-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform var(--motion-medium) var(--ease-standard); }
.mf-card:hover .mf-card__media img { transform: scale(1.045); }
.mf-count--onmedia { position: absolute; right: 10px; top: 10px; z-index: 2; }
.mf-card--panel .mf-card__media {
  display: grid; place-items: center;
  background: linear-gradient(150deg, #1E3557 0%, #16233A 100%);
}
.mf-big { font-family: var(--font-serif); font-size: 4rem; font-weight: 700; color: rgba(255,255,255,.13); }
.mf-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--space-4); display: grid; gap: 8px; align-content: end;
}
.mf-h3 { font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--white); text-wrap: balance; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.mf-h3 a::after { content: ""; position: absolute; inset: 0; }
.mf-card:hover .mf-h3 { color: var(--gz-gold-hi); }

.pagination { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-8) 0; }
.pagination a, .pagination span {
  padding: var(--space-2) var(--space-4); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; color: var(--mf-tx);
}
.pagination .current { background: var(--brand-orange); border-color: var(--brand-orange); color: var(--white); }

/* ============================================================================
   ARTICLE — .gz-post sheet + 300px .gz-rail sibling ("sa kilid" panel)
   ========================================================================= */
.gz-wrap { background: var(--mf-bg); padding: var(--space-8) 0 var(--space-16); }
.gz-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 0 38px; align-items: start; }

.gz-post {
  background: var(--gz-sheet); color: var(--gz-tx);
  border: 1px solid var(--gz-rule); border-top: 6px double var(--mf-navy);
  padding: var(--space-8) clamp(20px, 4vw, 54px) var(--space-12);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
/* ANG PAGADIAN CITY KARON ARTICLE MASTHEAD */
.apck-newsbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin: calc(-1 * var(--space-3)) 0 var(--space-8); padding: 12px 14px;
  background: #15191f; border-top: 2px solid var(--mf-sea); border-bottom: 1px solid var(--gz-rule);
}
.apck-newsbar__identity { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.apck-newsbar__identity:hover strong, .apck-newsbar__identity:focus-visible strong { color: var(--gz-gold-hi); }
.apck-newsbar__identity:focus-visible { outline: 2px solid var(--mf-sea); outline-offset: 3px; }
.apck-newsbar__seal { flex: 0 0 46px; width: 46px; height: 46px; object-fit: contain; }
.apck-newsbar__copy { display: block; min-width: 0; }
.apck-newsbar__copy strong {
  display: block; color: var(--white); font-family: var(--font-serif); font-size: clamp(16px, 2vw, 21px);
  line-height: 1.05; letter-spacing: .035em; text-transform: uppercase;
}
.apck-newsbar__copy small { display: block; margin-top: 4px; color: #9fb0c3; font-size: 10.5px; line-height: 1.3; }
.apck-newsbar__badge {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 32px; padding: 7px 13px;
  border-radius: 999px; background: #a9232b; color: var(--white); font-size: 10px; font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 640px) {
  .apck-newsbar { align-items: flex-start; flex-direction: column; margin: -8px 0 var(--space-6); }
  .apck-newsbar__seal { flex-basis: 40px; width: 40px; height: 40px; }
  .apck-newsbar__copy small { font-size: 9.5px; }
  .apck-newsbar__badge { align-self: flex-start; min-height: 28px; }
}

.gz-kicker {
  display: inline-block; margin-bottom: var(--space-3);
  font-size: 11px; font-weight: 800; letter-spacing: 3.2px; text-transform: uppercase;
  color: var(--mf-navy); border-bottom: 2px solid var(--gz-gold); padding-bottom: 4px;
}
.gz-navy .gz-kicker { color: var(--mf-navy); }
.gz-sea  .gz-kicker { color: var(--mf-sea); }
.gz-leaf .gz-kicker { color: var(--mf-leaf); }
.gz-gold .gz-kicker { color: var(--mf-gold); }
.gz-red  .gz-kicker { color: var(--mf-red); }

.gz-headline {
  font-family: var(--font-serif); font-weight: 700;
  font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; color: var(--white);
  text-wrap: balance; margin-bottom: var(--space-4);
}
.gz-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) 0; margin-bottom: var(--space-6);
  border-top: 1px solid var(--gz-rule); border-bottom: 1px solid var(--gz-rule);
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--gz-sub);
}
/* the writer's name is the one piece of the byline set in a script face —
   the Gazette house signature, kept here at a size that still reads at 1x */
.gz-byline strong {
  font-family: "Snell Roundhand", "Edwardian Script ITC", "Monotype Corsiva", "Apple Chancery", "Segoe Script", cursive;
  font-size: 19px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--gz-gold-hi); vertical-align: -1px;
}
.gz-dot { color: var(--gz-gold); }

.gz-body { font-family: var(--font-serif); font-size: 17px; line-height: 1.72; color: var(--gz-tx); max-width: 78ch; }
.gz-body p { margin: 0 0 1.35em; }
.gz-body h2 { font-family: var(--font-serif); font-size: 21px; font-weight: 800; margin: 1.7em 0 .5em; padding-bottom: 6px; border-bottom: 1px solid var(--gz-rule); color: var(--white); }
.gz-body h3 { font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mf-sea); margin: 1.5em 0 .5em; }
.gz-body a { color: var(--gz-gold-hi); text-decoration: underline; text-underline-offset: 2px; }
.gz-body ul, .gz-body ol { margin: 0 0 1.35em; padding-left: 1.2em; }
.gz-body ul li { list-style: disc; margin-bottom: .5em; }
.gz-body ol li { list-style: decimal; margin-bottom: .5em; }
.gz-body blockquote { margin: 1.5em 0; padding: var(--space-4) var(--space-6); border-left: 4px solid var(--gz-gold); background: rgba(255,255,255,.03); font-style: italic; }
.gz-body em { color: var(--gz-sub); }
.gz-body::after { content: ""; display: block; clear: both; }

/* ---- figures: absolute image + overlaid three-rank caption -------------- */
.gz-slot { position: relative; margin: 0 0 var(--space-6); overflow: hidden; background: #0E1116; }
.gz-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gz-slot-banner { width: 100%; aspect-ratio: 16/8; min-height: 280px; }
.gz-slot-wide { clear: both; width: 100%; aspect-ratio: 16/8; min-height: 260px; margin: var(--space-6) 0; }
.gz-slot-right { float: right; width: min(560px, 52%); margin: 6px 0 16px 26px; aspect-ratio: 4/5; }
.gz-slot-left  { float: left;  width: min(540px, 50%); margin: 6px 26px 16px 0; aspect-ratio: 4/3; }
.gz-slot-tile  { width: 100%; aspect-ratio: 16/10; margin: 0; }
.gz-slot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: grid; gap: 2px; padding: var(--space-6) var(--space-4) var(--space-3);
  font-family: var(--font-sans);
  background: linear-gradient(180deg, rgba(11,20,33,0) 0%, rgba(11,20,33,.58) 38%, rgba(8,14,24,.94) 100%);
}
.gz-cap-k { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gz-gold-hi); }
.gz-cap-t { font-size: 12px; line-height: 1.45; color: var(--white); }
.gz-cap-c { font-size: 10.5px; color: #B9C6D4; }

/* ---- gallery ------------------------------------------------------------- */
.gz-gallery { margin-top: var(--space-8); }
.gz-gallery__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--gz-rule);
}
.gz-gallery__head h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.gz-gallery__head span { font-size: 12px; color: var(--gz-sub); font-weight: 600; }
.gz-gallery__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gz-gallery__grid .gz-slot { transition: transform var(--motion-medium) var(--ease-standard); }
.gz-gallery__grid .gz-slot:hover { transform: translateY(-3px); }

/* ---- 300px related rail -------------------------------------------------- */
.gz-rail { display: grid; gap: var(--mf-gap); align-content: start; position: sticky; top: var(--space-4); }
.gz-rl-back {
  display: block; padding: var(--space-3) var(--space-4); border-radius: var(--mf-r);
  background: var(--mf-card); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mf-tx);
}
.gz-rl-back:hover { color: var(--mf-gold); }
.gz-rl-panel { background: var(--mf-card); border-radius: var(--mf-r); padding: var(--space-4); border-top: 3px solid var(--mf-navy); }
.gz-rl-h { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mf-sub); margin-bottom: var(--space-2); }
.gz-rl-it { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid rgba(255,255,255,.08); }
.gz-rl-it:first-of-type { border-top: 0; }
.gz-rl-th img { width: 92px; height: 64px; object-fit: cover; border-radius: 4px; }
.gz-rl-tx { display: grid; gap: 3px; min-width: 0; }
.gz-rl-k { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gz-rl-k--navy { color: var(--mf-navy); }
.gz-rl-k--sea  { color: var(--mf-sea); }
.gz-rl-k--leaf { color: var(--mf-leaf); }
.gz-rl-k--gold { color: var(--mf-gold); }
.gz-rl-k--red  { color: var(--mf-red); }
.gz-rl-t { font-size: 13px; font-weight: 700; line-height: 1.34; color: var(--mf-tx); }
.gz-rl-d { font-size: 10.5px; color: var(--mf-sub); }
.gz-rl-it:hover .gz-rl-t { color: var(--mf-gold); }
.gz-rl-cat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid rgba(255,255,255,.08); }
.gz-rl-cat:first-of-type { border-top: 0; }
.gz-rl-cat strong { font-size: 13px; font-weight: 700; color: var(--mf-tx); }
.gz-rl-cat span { font-size: 11px; color: var(--mf-sub); }
.gz-rl-cat:hover strong { color: var(--mf-gold); }

/* ---------- 404 ---------- */
.error-404 { padding: var(--space-24) 0; text-align: center; }
.error-404 h1 { font-size: 3rem; color: var(--mf-gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--masthead-navy); color: #C9D2E3; }
.site-footer .wrap { padding: var(--space-16) var(--space-6) var(--space-8); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-12); }
.site-footer h3 { color: var(--white); font-size: 1rem; margin-bottom: var(--space-3); text-transform: uppercase; letter-spacing: 0.06em; }
.site-footer__brand { font-family: var(--font-serif); font-size: 1.5rem; color: var(--white); margin-bottom: var(--space-2); }
.site-footer__links { display: grid; gap: var(--space-2); }
.site-footer__links a:hover { color: var(--brand-orange-lite); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8125rem; padding: var(--space-4) var(--space-6); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Responsive ---------- */
@media (max-width: 1149px) {
  .gz-layout { display: block; }
  .gz-rail { position: static; margin: var(--space-8) auto 0; max-width: 640px; }
}
@media (max-width: 1080px) {
  .mf-row { grid-template-columns: 1fr; }
  .mf-rail { grid-template-columns: 1fr 1fr; }
  .mf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .masthead-banner { display: flex; flex-direction: column-reverse; min-height: 0; }
  .masthead-banner::before { display: none; }
  .masthead-banner__photo { position: relative; height: 150px; }
  .masthead-banner__panel { width: 100%; clip-path: none; border-bottom: 3px solid var(--brand-orange); padding: var(--space-6); }
  .site-masthead--compact .masthead-banner__photo { display: none; }
  .masthead-features__inner { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .masthead-features__quote { text-align: left; max-width: none; }
  .masthead-features__grid { gap: var(--space-3); }
  .masthead-features__item { border-right: 0; padding-right: 0; flex: 1 1 45%; }
  .site-footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .mf-rail { grid-template-columns: 1fr; }
  .mf-grid { grid-template-columns: 1fr; }
  .mf-track { min-height: 300px; }
  .mf-cap { padding: var(--space-4); }
  .gz-gallery__grid { grid-template-columns: 1fr; }
  .gz-slot-right, .gz-slot-left { float: none; width: 100%; margin: 0 0 var(--space-4); aspect-ratio: 16/10; }
}
@media (max-width: 640px) {
  .site-nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); }
  .primary-nav { display: none; width: 100%; }
  .primary-nav.is-open { display: block; }
  .primary-nav ul { flex-direction: column; }
  .site-navbar__inner { flex-wrap: wrap; }
  .masthead-banner__seals .seal { width: 66px; height: 66px; }
  .masthead-banner__photo { height: 110px; }
  .site-masthead--compact .masthead-banner__content { flex-wrap: wrap; }
  .masthead-features__item { flex: 1 1 100%; font-size: 0.75rem; }
  .masthead-contact__inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .gz-post { padding: var(--space-6) var(--space-4) var(--space-8); }
  .gz-rl-it { grid-template-columns: 72px minmax(0, 1fr); }
  .gz-rl-th img { width: 72px; height: 52px; }
}

/* PAGKARON LEGISLATIVE SEARCH START */
.apck-search-page { background: var(--mf-bg); min-height: 60vh; padding: var(--space-8) 0 var(--space-16); }
.apck-search-desk {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 0 0 var(--space-8); padding: clamp(20px, 3vw, 34px);
  background:
    linear-gradient(125deg, rgba(77,143,219,.12), transparent 42%),
    linear-gradient(145deg, #20242B 0%, #1A1E25 100%);
  border: 1px solid #38414D; border-top: 4px solid var(--mf-sea); border-radius: var(--mf-r);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
.apck-search-desk::after {
  content: ""; position: absolute; z-index: -1; top: -80px; right: 20%; width: 310px; height: 260px;
  background: linear-gradient(135deg, transparent 42%, rgba(255,255,255,.025) 42% 70%, transparent 70%);
  transform: rotate(8deg); pointer-events: none;
}
.apck-search-desk__head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: var(--space-8); align-items: end; }
.apck-search-desk__eyebrow { display: block; margin-bottom: 6px; color: var(--mf-sea); font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.apck-search-desk__intro h2 { margin: 0; color: var(--white); font-family: var(--font-serif); font-size: clamp(30px, 4.2vw, 48px); line-height: .98; letter-spacing: -.035em; }
.apck-search-desk__intro p { max-width: 720px; margin: 14px 0 0; color: #B4BEC9; font-size: 14px; line-height: 1.55; }
.apck-search-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.apck-search-stat { position: relative; min-width: 0; padding: 14px 14px 13px 18px; background: #171A20; border: 1px solid #39424E; border-radius: 8px; overflow: hidden; }
.apck-search-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--mf-navy); }
.apck-search-stat--ordinance::before { background: var(--mf-gold); }
.apck-search-stat strong { display: block; color: var(--white); font-size: clamp(23px, 3vw, 34px); line-height: 1; }
.apck-search-stat span { display: block; margin-top: 5px; color: var(--gz-gold-hi); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.apck-search-stat small { display: block; margin-top: 2px; color: var(--mf-sub); font-size: 9.5px; text-transform: uppercase; }
.apck-search-form { margin-top: var(--space-6); }
.apck-search-form__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 58px; border: 1px solid #4B5665; border-radius: 8px; overflow: hidden; background: #303744; box-shadow: 0 9px 22px rgba(0,0,0,.24); }
.apck-search-form__bar:focus-within { border-color: var(--mf-sea); box-shadow: 0 0 0 3px rgba(62,176,201,.18), 0 9px 22px rgba(0,0,0,.24); }
.apck-search-form__bar input { min-width: 0; width: 100%; border: 0; outline: 0; padding: 0 18px; background: transparent; color: var(--white); font: 600 15px/1.3 var(--font-sans); }
.apck-search-form__bar input::placeholder { color: #B3C2D2; opacity: .9; }
.apck-search-form__bar button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 160px; border: 0; padding: 0 20px; background: linear-gradient(145deg, #18A8D1, #0078A8); color: var(--white); cursor: pointer; font: 900 12px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.apck-search-form__bar button:hover, .apck-search-form__bar button:focus-visible { background: linear-gradient(145deg, #2BC0E8, #078EBF); }
.apck-search-form__bar button:disabled { cursor: wait; opacity: .65; }
.apck-search-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.apck-search-filters label { display: flex; align-items: center; gap: 8px; color: #AEB8C4; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.apck-search-filters select, .apck-search-filters input { height: 36px; border: 1px solid #46515E; border-radius: 5px; padding: 0 10px; background: #171A20; color: var(--mf-tx); font: 600 12px var(--font-sans); }
.apck-search-filters input { width: 105px; }
.apck-search-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 12px; color: var(--mf-sub); font-size: 11px; }
.apck-search-examples > span { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.apck-search-examples button { border: 1px solid #414B58; border-radius: 999px; padding: 5px 9px; background: #252B34; color: #C8D4E0; cursor: pointer; font: 600 10.5px var(--font-sans); }
.apck-search-examples button:hover, .apck-search-examples button:focus-visible { border-color: var(--mf-sea); color: var(--white); }
.apck-search-status { min-height: 24px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #343C47; color: #AEB8C4; font-size: 12px; }
.apck-search-desk.is-searching .apck-search-status::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--mf-sea); border-radius: 50%; vertical-align: -2px; animation: apck-spin .7s linear infinite; }
@keyframes apck-spin { to { transform: rotate(360deg); } }
.apck-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.apck-search-result { min-width: 0; padding: 16px; background: #252A32; border: 1px solid #3A444F; border-top: 3px solid var(--mf-navy); border-radius: 7px; }
.apck-search-result--ordinance { border-top-color: var(--mf-gold); }
.apck-search-result__top { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.apck-search-result__chip, .apck-search-result__number, .apck-search-result__available, .apck-search-result__unavailable { display: inline-flex; align-items: center; min-height: 23px; border-radius: 999px; padding: 4px 8px; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.apck-search-result__chip { background: rgba(77,143,219,.16); color: #78B8FF; }
.apck-search-result--ordinance .apck-search-result__chip { background: rgba(212,175,92,.15); color: var(--gz-gold-hi); }
.apck-search-result__number { background: #15181D; color: var(--white); font-variant-numeric: tabular-nums; }
.apck-search-result__available { margin-left: auto; background: rgba(87,184,120,.14); color: #7CD99A; }
.apck-search-result__unavailable { margin-left: auto; background: rgba(224,104,94,.12); color: #E8958E; }
.apck-search-result h3 { margin: 12px 0 10px; color: var(--white); font-family: var(--font-serif); font-size: 17px; line-height: 1.27; }
.apck-search-result mark { padding: 0 .08em; background: #F2D170; color: #17181D; }
.apck-search-result__meta { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-bottom: 10px; color: #9FAAB7; font-size: 10.5px; }
.apck-search-result__meta-item strong { color: #D2DAE3; }
.apck-search-result__excerpt { display: -webkit-box; overflow: hidden; margin: 0; color: #B9C1CB; font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.apck-search-result__actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.apck-search-action { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; border: 1px solid #4A5563; border-radius: 5px; padding: 7px 10px; background: #171A20; color: #D8E1EA; cursor: pointer; font: 800 10.5px/1.2 var(--font-sans); text-decoration: none; }
.apck-search-action:hover, .apck-search-action:focus-visible { border-color: var(--mf-sea); color: var(--white); }
.apck-search-action--pdf { border-color: #2F8D58; background: #173524; color: #8EE0AA; }
.apck-search-action--text { border-color: #3C75AF; background: #192D43; color: #8FC5F7; }
.apck-search-action--missing { cursor: not-allowed; opacity: .72; }
.apck-full-text { grid-column: 1 / -1; margin-top: 14px; border: 1px solid #46515E; border-radius: 6px; background: #14171C; color: #D9E0E8; }
.apck-full-text__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding: 11px 13px; border-bottom: 1px solid #38414C; color: var(--white); font-size: 11px; }
.apck-full-text__head span { color: var(--mf-sub); }
.apck-full-text pre { max-height: 520px; overflow: auto; margin: 0; padding: 16px; color: #D6DCE4; white-space: pre-wrap; word-break: normal; font: 13px/1.65 var(--font-serif); }
.apck-full-text > p, .apck-full-text > .apck-search-action { margin: 14px; }
.apck-full-text--error { border-color: var(--mf-red); color: #F0AAA4; padding: 14px; }
.apck-search-empty { grid-column: 1 / -1; padding: 22px; border: 1px dashed #4A5563; border-radius: 6px; color: #B7C1CC; text-align: center; }
.apck-search-empty--error { border-color: rgba(224,104,94,.55); color: #EAA09A; }
.apck-search-load-more { grid-column: 1 / -1; min-height: 44px; border: 1px solid #4B759E; border-radius: 6px; background: #192D43; color: #A7D4FF; cursor: pointer; font: 900 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.apck-search-load-more:hover, .apck-search-load-more:focus-visible { border-color: var(--mf-sea); background: #203C58; color: var(--white); }
.apck-search-noscript { color: #D5DCE5; }
.apck-search-noscript a { color: var(--gz-gold-hi); text-decoration: underline; }

/* Legislative references inside news reading copy. */
.gz-body .apck-law-ref { color: var(--gz-gold-hi); font-weight: 750; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gz-body .apck-law-ref--pdf::after { content: " PDF"; color: #7CD99A; font-family: var(--font-sans); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-decoration: none; vertical-align: .18em; }
.gz-body .apck-law-ref--text-only::after { content: " TEXT"; color: #8FC5F7; font-family: var(--font-sans); font-size: 8px; font-weight: 900; letter-spacing: .06em; text-decoration: none; vertical-align: .18em; }
.gz-body .apck-law-ref--resolving { opacity: .72; }
.gz-body .apck-law-ref__text { display: inline-flex; margin: 0 4px; border: 1px solid #3C75AF; border-radius: 999px; padding: 1px 6px; color: #9DCCF5; font-family: var(--font-sans); font-size: 8.5px; font-weight: 900; letter-spacing: .04em; line-height: 1.5; text-decoration: none; text-transform: uppercase; vertical-align: .15em; }
.gz-body .apck-law-ref__text:hover, .gz-body .apck-law-ref__text:focus-visible { border-color: var(--gz-gold); color: var(--gz-gold-hi); }

@media (max-width: 900px) {
  .apck-search-desk__head { grid-template-columns: 1fr; }
  .apck-search-stats { max-width: 520px; }
}
@media (max-width: 720px) {
  .apck-search-results { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .apck-search-desk { padding: 17px; }
  .apck-search-desk__intro h2 { font-size: 32px; }
  .apck-search-form__bar { grid-template-columns: 1fr; }
  .apck-search-form__bar input { min-height: 54px; }
  .apck-search-form__bar button { min-height: 48px; }
  .apck-search-filters { display: grid; grid-template-columns: 1fr; }
  .apck-search-filters label { justify-content: space-between; }
  .apck-search-filters select, .apck-search-filters input { min-width: 160px; }
  .apck-search-result__available, .apck-search-result__unavailable { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .apck-search-desk.is-searching .apck-search-status::before { animation-duration: 1.4s; }
}
/* PAGKARON LEGISLATIVE SEARCH END */

/* PAGKARON SESSION CAROUSEL START */
.mf-carousel-counter {
  position: absolute; top: var(--space-3); right: var(--space-3); z-index: 5;
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(10,13,19,.72); color: #f5f7fa; backdrop-filter: blur(7px);
  padding: 7px 11px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; pointer-events: none;
}
.mf-slide__placeholder {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 6px; overflow: hidden; padding: 32px; text-align: center; color: #fff;
  background: radial-gradient(circle at 72% 22%, rgba(35,183,229,.38), transparent 31%), linear-gradient(135deg,#08294e 0%,#0b4f85 48%,#102034 100%);
}
.mf-slide__placeholder::before {
  content: ""; position: absolute; inset: -20%; opacity: .2;
  background: repeating-linear-gradient(115deg,transparent 0 34px,rgba(255,255,255,.15) 35px 36px);
  transform: rotate(-5deg); pointer-events: none;
}
.mf-slide__placeholder > * { position: relative; z-index: 1; }
.mf-slide__number { font-size: clamp(92px,18vw,210px); font-weight: 900; line-height: .72; letter-spacing: -.08em; opacity: .3; }
.mf-slide__placeholder strong { font-size: clamp(17px,2.4vw,28px); letter-spacing: .02em; text-transform: uppercase; }
.mf-slide__placeholder small { color: #cfe9f7; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.mf-slide--placeholder .mf-scrim { background: linear-gradient(180deg,rgba(6,10,16,.04) 20%,rgba(6,9,14,.95) 100%); }
.pagadian-session-news__dek { border-left: 4px solid #23b7e5; padding: 14px 16px; background: rgba(35,183,229,.08); }
.pagadian-session-news__source { display: inline-flex; border-radius: 7px; background: #0b68a7; color: #fff; font-weight: 800; padding: 10px 14px; text-decoration: none; }
.pagadian-session-news__source:hover,.pagadian-session-news__source:focus-visible { background: #1386c7; color: #fff; }
@media (max-width:680px) {
  .mf-carousel-counter { top: 9px; right: 9px; font-size: 9px; padding: 6px 9px; }
  .mf-slide__number { font-size: 96px; }
}
/* PAGKARON SESSION CAROUSEL END */

/* PAGKARON COUNCIL REPORT START */
.pgk-report { --pgk-ink:#eaf1f8; --pgk-dim:#9fb3c8; --pgk-line:rgba(255,255,255,.12);
  --pgk-card:rgba(255,255,255,.035); color: var(--pgk-ink); }
.pgk-report__dek { margin:0 0 20px; padding:16px 18px; border-left:4px solid #23b7e5;
  border-radius:0 10px 10px 0; background:rgba(35,183,229,.09);
  font-size:clamp(16px,2vw,19px); line-height:1.55; font-weight:600; }
/* Flex, not grid: an odd number of facts in a grid leaves an empty orphan cell
   with the divider colour showing through. Flex lets the last row fill. */
.pgk-report__facts { display:flex; flex-wrap:wrap; gap:1px; margin:0 0 20px; padding:0;
  list-style:none; overflow:hidden; border:1px solid var(--pgk-line);
  border-radius:10px; background:var(--pgk-line); }
.pgk-report__facts li { flex:1 1 140px; display:flex; flex-direction:column; gap:4px;
  padding:12px 14px; background:#0f141c; }
.pgk-report__facts span { font-size:10.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pgk-dim); }
.pgk-report__facts strong { font-size:15px; font-weight:800; line-height:1.25; }
.pgk-report__attendance { margin:0 0 22px; color:var(--pgk-dim); font-size:14.5px; line-height:1.6; }
.pgk-legend { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; padding:0; list-style:none; }
.pgk-legend li { display:flex; align-items:center; gap:7px; padding:6px 11px;
  border:1px solid var(--pgk-line); border-radius:999px; font-size:12px; color:var(--pgk-dim); }
.pgk-legend b { color:var(--pgk-ink); font-weight:700; }
.pgk-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.pgk-report h2 { margin:34px 0 14px; padding-bottom:9px; border-bottom:1px solid var(--pgk-line);
  font-size:clamp(19px,2.4vw,23px); letter-spacing:-.01em; }
.pgk-sec { margin:0 0 26px; }
.pgk-sec__name { margin:22px 0 12px; font-size:12px; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:#23b7e5; }
.pgk-item { margin:0 0 12px; padding:15px 17px; border:1px solid var(--pgk-line);
  border-left:3px solid var(--pgk-edge,#4a5a6b); border-radius:9px; background:var(--pgk-card); }
.pgk-item__chip { display:inline-flex; align-items:center; gap:7px; margin:0 0 9px;
  padding:4px 10px; border-radius:999px; background:var(--pgk-chip,rgba(255,255,255,.08));
  color:var(--pgk-chipink,#dbe7f2); font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; }
.pgk-item__text { margin:0; font-size:15.5px; line-height:1.68; }
.pgk-item__meta { display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 0; padding:0; list-style:none; }
.pgk-item__meta li { padding:4px 9px; border:1px solid var(--pgk-line); border-radius:6px;
  background:rgba(0,0,0,.22); font-size:12px; color:var(--pgk-dim); }
.pgk-item__meta b { color:var(--pgk-ink); font-weight:700; }
.pgk-item__note { margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--pgk-dim); font-style:italic; }
.pgk-item--final { --pgk-edge:#2fbf71; --pgk-chip:rgba(47,191,113,.17); --pgk-chipink:#8ee7b6; }
.pgk-item--stage { --pgk-edge:#23b7e5; --pgk-chip:rgba(35,183,229,.17); --pgk-chipink:#9adcf5; }
.pgk-item--approve { --pgk-edge:#4fd1c5; --pgk-chip:rgba(79,209,197,.16); --pgk-chipink:#9fe8e0; }
.pgk-item--refer { --pgk-edge:#e0a33a; --pgk-chip:rgba(224,163,58,.16); --pgk-chipink:#f0cd8d; }
.pgk-item--deny { --pgk-edge:#e5544b; --pgk-chip:rgba(229,84,75,.17); --pgk-chipink:#f4a49e; }
.pgk-item--hold { --pgk-edge:#8b93a7; --pgk-chip:rgba(139,147,167,.17); --pgk-chipink:#c3cad8; }
.pgk-item--process { --pgk-edge:#7c8cf8; --pgk-chip:rgba(124,140,248,.17); --pgk-chipink:#b9c3fb; }
.pgk-item--note { --pgk-edge:#5f7286; --pgk-chip:rgba(95,114,134,.2); --pgk-chipink:#bccbd9; }
.pgk-item--open { --pgk-edge:#4a5a6b; --pgk-chip:transparent; --pgk-chipink:#9fb3c8; }
.pgk-item--open .pgk-item__chip { border:1px dashed rgba(255,255,255,.24); }
.pgk-item--quote { --pgk-edge:#3c4a59; --pgk-chip:transparent; --pgk-chipink:#8fa2b5; }
.pgk-item--quote .pgk-item__text { font-style:italic; color:#cfdae6; }
.pgk-rules { margin:0; padding-left:20px; color:var(--pgk-dim); font-size:14px; line-height:1.7; }
.pgk-rules li { margin-bottom:7px; }
.pgk-rules li::marker { color:#23b7e5; }
.pgk-source { display:inline-flex; align-items:center; gap:9px; margin:4px 0 12px;
  padding:11px 16px; border-radius:8px; background:#0b68a7; color:#fff;
  font-weight:800; text-decoration:none; }
.pgk-source:hover,.pgk-source:focus-visible { background:#1386c7; color:#fff; }
.pgk-controls { color:var(--pgk-dim); font-size:13.5px; line-height:1.65; font-style:italic; }
@media (max-width:680px) {
  .pgk-report__facts li { flex:1 1 42%; }
  .pgk-item { padding:13px 14px; }
  .pgk-item__text { font-size:15px; }
}
/* PAGKARON COUNCIL REPORT END */