/* ==========================================================================
   DIMOCRACY — /protoselida/ ("premium press kiosk")
   Scoped page template for the md-frontpages plugin shortcode.

   EVERYTHING here is scoped under .protoselida-page so it (a) cannot bleed into
   other templates (this file is auto-enqueued site-wide) and (b) reliably beats
   the plugin's own inline <style> block, which targets bare .md-frontpages-*
   selectors — adding the wrapper class raises specificity above the plugin's.

   Reuses foundation tokens from critical.css (:root): fonts, --color-*, etc.
   Two-tier breakpoint set mirrors the plugin's (768px) + the theme nav (782px).
   ========================================================================== */

.protoselida-page{
  --proto-card-radius:0px;
  --proto-shadow:0 1px 2px rgba(17,17,17,.04),0 6px 18px rgba(17,17,17,.07);
  --proto-shadow-hover:0 10px 22px rgba(17,17,17,.10),0 24px 48px rgba(17,17,17,.13);
  --proto-line:var(--color-line);
  background:var(--color-bg-alt);
  padding-bottom:56px;
}
.protoselida__container{padding-top:8px;}

/* ---- Top billboard (mobile only) — give the slot breathing room when filled ---- */
.protoselida__billboard{margin:14px auto 6px;}
.protoselida__billboard:empty{display:none;}

/* ==========================================================================
   Editorial masthead (theme-owned header above the plugin)
   ========================================================================== */
.protoselida__header{
  text-align:center;
  max-width:760px;
  margin:0 auto;
  padding:34px 0 26px;
}
.protoselida__eyebrow{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:12px;
  letter-spacing:2.4px;
  text-transform:uppercase;
  color:var(--color-accent-red);
  margin:0 0 12px;
}
.protoselida__title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(34px,5.4vw,58px);
  letter-spacing:-.5px;
  line-height:1.04;
  color:var(--color-ink);
  margin:0;
  position:relative;
  display:inline-block;
  padding-bottom:16px;
}
.protoselida__title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:54px;
  height:3px;
  background:var(--color-accent-red);
  border-radius:2px;
}
.protoselida__intro{
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--color-muted);
  margin:18px auto 0;
  max-width:620px;
}

/* ==========================================================================
   md-frontpages shortcode — scoped overrides
   ========================================================================== */
.protoselida-page .md-frontpages-shortcode-wrapper{
  position:relative;
  z-index:1;
}
/* The plugin prints its own <h1>ΠΡΩΤΟΣΕΛΙΔΑ ΕΦΗΜΕΡΙΔΩΝ</h1>; we render our own
   masthead H1 above, so suppress the plugin's to avoid a duplicate page title. */
.protoselida-page .md-frontpages-main-title{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- Date control bar ------------------------------------------------------ */
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-date-selector{
  margin:0 auto 36px;
  max-width:760px;
  width:100%;
  padding:0;
  box-sizing:border-box;
}
.protoselida-page .md-frontpages-date-controls{
  background:var(--color-white);
  padding:18px 22px;
  border:1px solid var(--proto-line);
  border-radius:14px;
  box-shadow:var(--proto-shadow);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

/* base pill button reset (overrides the plugin's grey pills + purple/red theme) */
.protoselida-page .md-frontpages-btn{
  background:var(--color-bg-alt);
  color:var(--color-ink);
  border:1px solid var(--proto-line);
  padding:11px 20px;
  border-radius:50px;
  font-family:var(--font-sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:.4px;
  text-transform:uppercase;
  cursor:pointer;
  transition:background var(--transition),color var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  box-shadow:none;
}
.protoselida-page .md-frontpages-btn svg{width:18px;height:18px;flex:0 0 auto;}
.protoselida-page .md-frontpages-btn:hover{
  background:var(--color-white);
  border-color:var(--color-line-strong);
  color:var(--color-ink);
  transform:translateY(-1px);
  box-shadow:var(--proto-shadow);
}
.protoselida-page .md-frontpages-btn:active{transform:translateY(0);}
.protoselida-page .md-frontpages-btn:focus-visible{
  outline:2px solid var(--color-accent-red);
  outline-offset:2px;
}

/* "ΣΗΜΕΡΙΝΑ ΠΡΩΤΟΣΕΛΙΔΑ" = primary action (solid ink) */
.protoselida-page .md-frontpages-btn-today{
  background:var(--color-ink);
  color:var(--color-white);
  border-color:var(--color-ink);
  box-shadow:none;
}
.protoselida-page .md-frontpages-btn-today:hover{
  background:var(--color-accent-red);
  border-color:var(--color-accent-red);
  color:var(--color-white);
  box-shadow:0 6px 16px rgba(208,27,40,.22);
}

/* prev / next = round ghost steppers */
.protoselida-page .md-frontpages-date-picker-wrapper{
  display:flex;
  align-items:center;
  gap:14px;
}
.protoselida-page .md-frontpages-btn-prev,
.protoselida-page .md-frontpages-btn-next{
  width:46px;
  height:46px;
  padding:0;
  border-radius:50%;
  background:var(--color-white);
  color:var(--color-ink);
}
.protoselida-page .md-frontpages-btn-prev svg,
.protoselida-page .md-frontpages-btn-next svg{width:22px;height:22px;}
.protoselida-page .md-frontpages-btn-prev:hover,
.protoselida-page .md-frontpages-btn-next:hover{
  background:var(--color-ink);
  border-color:var(--color-ink);
  color:var(--color-white);
}

/* readonly date field + Greek long-date caption */
.protoselida-page .md-frontpages-date-input-wrapper{position:relative;cursor:pointer;text-align:center;}
.protoselida-page .md-frontpages-date-picker{
  background:var(--color-white);
  border:1px solid var(--proto-line);
  padding:11px 18px;
  border-radius:10px;
  font-family:var(--font-sans);
  font-size:15px;
  font-weight:600;
  color:var(--color-ink);
  cursor:pointer;
  transition:border-color var(--transition),box-shadow var(--transition);
  min-width:148px;
  text-align:center;
}
.protoselida-page .md-frontpages-date-picker:hover{border-color:var(--color-line-strong);}
.protoselida-page .md-frontpages-date-picker:focus{
  outline:none;
  border-color:var(--color-accent-red);
  box-shadow:0 0 0 3px rgba(208,27,40,.12);
}
.protoselida-page .md-frontpages-date-display{
  font-family:var(--font-sans);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.3px;
  color:var(--color-muted);
  margin-top:8px;
  text-align:center;
  text-transform:capitalize;
}

/* sync button (admin-only "συγχρονισμός" / fallback) — keep it on-brand, low-key */
.protoselida-page .md-frontpages-btn-sync{
  background:var(--color-white);
  color:var(--color-accent-red);
  border-color:var(--color-accent-red);
  box-shadow:none;
}
.protoselida-page .md-frontpages-btn-sync:hover{
  background:var(--color-accent-red);
  color:var(--color-white);
  border-color:var(--color-accent-red);
}

/* ---- Category sections ----------------------------------------------------- */
.protoselida-page .md-frontpages-wrapper{margin:0;}
.protoselida-page .md-frontpages-category{margin:0 0 44px;}
.protoselida-page .md-frontpages-category-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(20px,2.6vw,26px);
  letter-spacing:.2px;
  color:var(--color-ink);
  margin:0 0 22px;
  padding-bottom:12px;
  border-bottom:2px solid var(--color-ink);
  display:flex;
  align-items:center;
  gap:12px;
}
.protoselida-page .md-frontpages-category-title::before{
  content:"";
  width:10px;
  height:10px;
  flex:0 0 auto;
  background:var(--color-accent-red);
  border-radius:50%;
}

/* ---- Front-page grid ------------------------------------------------------- */
/* Fluid auto-fill grid overrides the plugin's fixed repeat(6,1fr); the wrapper
   keeps its .md-frontpages-columns-6 class but we ignore the rigid template so
   cards stay a comfortable size at every width. */
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid,
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-2,
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-3,
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-4,
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-5,
.protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-6{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:24px;
}

/* card */
.protoselida-page .md-frontpages-grid .md-frontpages-item,
.protoselida-page .md-frontpages-item{
  background:var(--color-white);
  border:1px solid var(--proto-line);
  border-radius:var(--proto-card-radius);
  box-shadow:var(--proto-shadow);
  overflow:hidden;
  position:relative;
  transition:transform var(--transition),box-shadow var(--transition),border-color var(--transition);
  /* neutralise any plugin defaults */
  padding:0;
  margin:0;
}
.protoselida-page .md-frontpages-item::before{content:none;}
.protoselida-page .md-frontpages-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--proto-shadow-hover);
  border-color:var(--color-line-strong);
}
.protoselida-page .md-frontpages-link{
  display:flex;
  flex-direction:column;
  height:100%;
  color:inherit;
}
.protoselida-page .md-frontpages-link:hover{color:inherit;}

/* image: front pages are portrait; show the top (masthead) of each page */
.protoselida-page .md-frontpages-image-wrapper{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  overflow:hidden;
  background:var(--color-bg-alt);
}
.protoselida-page .md-frontpages-image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
  transition:transform .45s ease;
}
.protoselida-page .md-frontpages-item:hover .md-frontpages-image{transform:scale(1.045);}
/* thin inner hairline so a white front page still reads as a card edge */
.protoselida-page .md-frontpages-image-wrapper::after{
  content:"";
  position:absolute;
  inset:0;
  box-shadow:inset 0 0 0 1px rgba(17,17,17,.05);
  pointer-events:none;
}

/* caption: newspaper name (serif) + publish date (muted) */
.protoselida-page .md-frontpages-item-info{
  padding:13px 14px 15px;
  border-top:1px solid var(--proto-line);
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1 1 auto;
}
.protoselida-page .md-frontpages-title{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:14.5px;
  line-height:1.25;
  letter-spacing:.1px;
  color:var(--color-ink);
  margin:0;
  transition:color var(--transition);
}
.protoselida-page .md-frontpages-item:hover .md-frontpages-title{color:var(--color-accent-red);}
.protoselida-page .md-frontpages-date{
  font-family:var(--font-sans);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.3px;
  text-transform:capitalize;
  color:var(--color-faint);
  margin:0;
}

/* ---- Empty state ----------------------------------------------------------- */
.protoselida-page .md-frontpages-no-results{
  text-align:center;
  padding:56px 20px;
  color:var(--color-muted);
  background:var(--color-white);
  border:1px solid var(--proto-line);
  border-radius:14px;
}
.protoselida-page .md-frontpages-no-results p{margin:0 0 8px;font-family:var(--font-sans);}
.protoselida-page .md-frontpages-no-results svg{stroke:var(--color-faint);}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:782px){
  .protoselida__header{padding:24px 0 18px;}
  .protoselida-page .md-frontpages-date-controls{
    padding:16px;
    gap:14px;
    justify-content:center;
  }
  .protoselida-page .md-frontpages-btn-today{order:-1;width:100%;}
  /* Keep the [‹ date ›] cluster compact + centred. Let the wrapper shrink-wrap
     (the parent .md-frontpages-date-controls already centres it) so the date
     field doesn't stretch and shove the round steppers to the card edges. */
  .protoselida-page .md-frontpages-date-picker-wrapper{
    width:auto;
    max-width:100%;
    justify-content:center;
    flex:0 1 auto;
  }
  .protoselida-page .md-frontpages-date-input-wrapper{flex:0 0 auto;}
  /* <input type=text> defaults to ~220px intrinsic width; pin it to the content
     ("ΗΗ/ΜΜ/ΕΕΕΕ") so the cluster stays tight and balanced on small screens. */
  .protoselida-page .md-frontpages-date-picker{min-width:0;width:150px;}
  .protoselida-page .md-frontpages-btn-prev,
  .protoselida-page .md-frontpages-btn-next{flex:0 0 auto;}
  .protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid,
  .protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-6{
    grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
    gap:16px;
  }
  .protoselida-page .md-frontpages-category{margin-bottom:34px;}
  .protoselida-page .md-frontpages-title{font-size:13.5px;}
}

@media (max-width:480px){
  .protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid,
  .protoselida-page .md-frontpages-shortcode-wrapper .md-frontpages-grid.md-frontpages-columns-6{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .protoselida-page .md-frontpages-item-info{padding:10px 11px 12px;}
  .protoselida-page .md-frontpages-date-picker{min-width:130px;}
}