/* ── History featured ──
   One story given room, on a plain white card with the year leading. Every
   colour and size is a variable so the Elementor controls can drive it. */

.phf{
  --phf-card:#ffffff;
  --phf-accent:#8a6a3b;
  --phf-ink:var(--ps-black,#111111);
  --phf-muted:#6b6b72;
  --phf-radius:var(--ps-radius,10px);
  --phf-pad:22px;
  --phf-gap:8px;

  --phf-grid-gap:14px;

  font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;
  letter-spacing:-.05em;

  /* One entry spans the space. Two or more sit two to a row — which covers both
     a pair side by side and a longer list wrapping into a grid. */
  display:grid;
  gap:var(--phf-grid-gap);
  grid-template-columns:1fr;
  align-items:stretch;
}
.phf.is-multi{grid-template-columns:repeat(2,minmax(0,1fr))}

/* An odd one at the end of a two-column grid fills the row rather than
   leaving a gap beside it. */
.phf.is-multi .phf-card:last-child:nth-child(odd){grid-column:1 / -1}
.phf *{font-family:inherit;letter-spacing:inherit;box-sizing:border-box}

.phf .phf-card{
  display:flex;
  flex-direction:column;
  gap:var(--phf-gap);
  background:var(--phf-card);
  border-radius:var(--phf-radius);
  padding:var(--phf-pad);
  text-decoration:none!important;
  color:var(--phf-ink)!important;
  transition:box-shadow .15s ease;
}
.phf .phf-card:hover{box-shadow:0 2px 14px rgba(0,0,0,.07)}

.phf-year{
  color:var(--phf-accent);
  font-weight:700;
  line-height:1;
  margin:0;
}
:where(.phf-year){font-size:1.7rem}

.phf-title{
  margin:0;
  color:var(--phf-ink);
  font-weight:700;
  line-height:1.35;
}
:where(.phf-title){font-size:.98rem}
.phf .phf-card:hover .phf-title{color:var(--phf-accent)}

.phf-date{color:var(--phf-muted);line-height:1.4}
:where(.phf-date){font-size:.82rem}

.phf-line{
  margin:0;
  color:var(--phf-muted);
  line-height:1.55;
}
:where(.phf-line){font-size:.86rem}

.phf-cta{
  color:var(--phf-accent);
  font-weight:700;
  line-height:1.3;
  margin-top:auto;   /* sits on the foot, so cards in a row line up */
  padding-top:2px;
}
:where(.phf-cta){font-size:.84rem}
.phf .phf-card:hover .phf-cta{text-decoration:underline;text-underline-offset:3px}

@media(max-width:700px){
  .phf.is-multi{grid-template-columns:1fr}
  .phf.is-multi .phf-card:last-child:nth-child(odd){grid-column:auto}
}

@media(max-width:600px){
  .phf .phf-card{--phf-pad:16px}
  :where(.phf-year){font-size:1.45rem}
  :where(.phf-title){font-size:.94rem}
}