/* ==========================================================================
   Feta & Olive — blog, search results and 404
   ========================================================================== */

/* ============================================================== Cards ==== */
.fno-card{
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--fno-line);
  border-radius:var(--fno-radius);
  overflow:hidden;
  transition:transform .6s var(--fno-ease),box-shadow .6s var(--fno-ease),border-color .6s var(--fno-ease);
}
.fno-card::after{
  content:"";position:absolute;inset-block-start:0;inset-inline-start:0;
  inline-size:100%;block-size:2px;
  background:var(--fno-primary);
  transform:scaleX(0);transform-origin:inline-start;
  transition:transform .6s var(--fno-ease);
  z-index:4;
}
.fno-card:hover{transform:translateY(-6px);box-shadow:var(--fno-shadow-m);border-color:transparent}
.fno-card:hover::after{transform:scaleX(1)}

.fno-card__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:18/13;background:var(--fno-bg-soft);
}
.fno-card__media img{
  inline-size:100%;block-size:100%;object-fit:cover;
  transition:transform 1.15s var(--fno-ease),filter .8s var(--fno-ease);
}
.fno-card:hover .fno-card__media img{transform:scale(1.07)}
.fno-card__shade{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(var(--fno-dark-rgb),.42),transparent 55%);
  opacity:0;transition:opacity .6s var(--fno-ease);
}
.fno-card:hover .fno-card__shade{opacity:1}

.fno-card__body{
  display:flex;flex-direction:column;flex:1 1 auto;
  padding:clamp(20px,2.2vw,28px);
  gap:12px;
}
.fno-card__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin:0;padding:0;list-style:none;
  font-size:.79rem;color:var(--fno-body);
  padding-block-end:12px;
  border-block-end:1px solid var(--fno-line);
}
.fno-card__meta li{display:inline-flex;align-items:center;gap:.45em}
.fno-card__meta svg{color:var(--fno-primary);flex:0 0 auto}

.fno-card__title{
  margin:0;
  font-size:1.16rem;line-height:1.35;
}
.fno-card__title--xl{font-size:var(--fno-h3)}
.fno-card__title a{
  color:var(--fno-ink);
  background-image:linear-gradient(var(--fno-primary),var(--fno-primary));
  background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .55s var(--fno-ease),color .35s var(--fno-ease);
}
.fno-card__title a:hover{color:var(--fno-primary);background-size:100% 1px}

.fno-card__excerpt{margin:0;font-size:.93rem;line-height:1.75}
.fno-card__body .fno-more{margin-block-start:auto;align-self:flex-start;padding-block-start:6px}

/* featured card */
.fno-card--featured{border:0;background:none;border-radius:0}
.fno-card--featured::after{display:none}
.fno-card--featured:hover{transform:none;box-shadow:none}
.fno-card--featured .fno-card__media{aspect-ratio:16/8;border-radius:var(--fno-radius)}
.fno-card--featured .fno-card__body{padding:26px 0 0}
.fno-card--featured .fno-card__meta{border:0;padding-block-end:0}
@media (min-width:900px){
  .fno-card--featured{
    display:grid;grid-template-columns:1.15fr 1fr;
    align-items:center;gap:clamp(28px,3.5vw,54px);
  }
  .fno-card--featured .fno-card__media{aspect-ratio:4/3}
  .fno-card--featured .fno-card__body{padding:0}
}

/* list layout */
.fno-grid--list .fno-card{flex-direction:row;align-items:stretch}
.fno-grid--list .fno-card__media{flex:0 0 40%;aspect-ratio:auto;min-block-size:260px}
.fno-grid--list .fno-card__body{justify-content:center}
@media (max-width:767px){
  .fno-grid--list .fno-card{flex-direction:column}
  .fno-grid--list .fno-card__media{flex:auto;aspect-ratio:18/13;min-block-size:0}
}

/* ==================================================== Blog archive ======= */
.fno-blogArchive{padding-block-start:clamp(48px,5vw,86px)}

/* ===================================================== Single post ======= */
.fno-single__head{
  display:grid;gap:16px;
  padding-block-end:clamp(22px,2.4vw,34px);
  margin-block-end:clamp(26px,3vw,42px);
  border-block-end:1px solid var(--fno-line);
}
.fno-single__cats{display:flex;flex-wrap:wrap;gap:8px}
.fno-single__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;
  margin-block-start:clamp(34px,4vw,56px);
  padding-block:26px;
  border-block:1px solid var(--fno-line);
}
.fno-single__tags .fno-eyebrow,.fno-share .fno-eyebrow{margin-block-end:10px}
.fno-single__tags ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fno-single__tags a{
  display:inline-flex;padding:6px 13px;font-size:.8rem;
  background:var(--fno-bg-soft);border-radius:999px;color:var(--fno-body);
  transition:.35s var(--fno-ease);
}
.fno-single__tags a:hover{background:var(--fno-primary);color:#fff}

.fno-share ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.fno-share a,.fno-share__copy{
  display:inline-flex;align-items:center;justify-content:center;
  inline-size:42px;block-size:42px;
  color:var(--fno-ink);
  border:1px solid var(--fno-line);border-radius:50%;
  transition:.42s var(--fno-ease);
}
.fno-share a:hover,.fno-share__copy:hover{
  background:var(--fno-primary);border-color:var(--fno-primary);color:#fff;transform:translateY(-3px);
}
.fno-share__copy.is-copied{background:var(--fno-primary-dark);border-color:var(--fno-primary-dark);color:#fff}

/* -------------------------------------------------------------- Post nav - */
.fno-postnav{
  display:grid;gap:14px;
  margin-block-start:clamp(30px,3.5vw,50px);
}
@media (min-width:700px){.fno-postnav{grid-template-columns:1fr 1fr}}
.fno-postnav__item{
  display:flex;flex-direction:column;gap:8px;
  padding:22px 24px;
  border:1px solid var(--fno-line);border-radius:var(--fno-radius);
  background:#fff;
  transition:.5s var(--fno-ease);
}
.fno-postnav__item.is-empty{border-color:transparent;background:none}
.fno-postnav__item--next{text-align:end;align-items:flex-end}
.fno-postnav__dir{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--fno-primary);
}
.fno-postnav__title{font-family:var(--fno-font-h);font-size:1.06rem;color:var(--fno-ink);line-height:1.35}
.fno-postnav__item:hover{background:var(--fno-bg-soft);border-color:transparent;box-shadow:var(--fno-shadow-s)}
[dir="rtl"] .fno-postnav__dir svg{transform:scaleX(-1)}

/* ==================================================== Search results ===== */
.fno-searchResults__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;
  padding-block-end:clamp(24px,3vw,38px);
  margin-block-end:clamp(30px,3.5vw,50px);
  border-block-end:1px solid var(--fno-line);
}
.fno-searchResults__bar .fno-searchform{flex:1 1 320px;max-inline-size:460px}
.fno-searchResults__jump{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fno-searchResults__jump a{
  display:inline-flex;align-items:center;gap:.5em;
  padding:9px 16px;font-size:.8rem;
  border:1px solid var(--fno-line);border-radius:999px;
  transition:.4s var(--fno-ease);
}
.fno-searchResults__jump a span{
  display:inline-flex;align-items:center;justify-content:center;
  min-inline-size:20px;block-size:20px;padding-inline:5px;
  font-size:.68rem;color:#fff;background:var(--fno-primary);border-radius:999px;
}
.fno-searchResults__jump a:hover{background:var(--fno-bg-soft);border-color:var(--fno-primary)}

.fno-searchGroup{margin-block-end:clamp(36px,4vw,62px)}
.fno-searchGroup__head{display:flex;align-items:center;gap:18px;margin-block-end:20px}
.fno-searchGroup__head h2{margin:0;font-size:var(--fno-h4)}
.fno-searchGroup__rule{flex:1 1 auto;block-size:1px;background:var(--fno-line)}
.fno-searchGroup__count{
  font-size:.76rem;letter-spacing:.12em;color:var(--fno-primary);
}

.fno-resultList{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.fno-result__link{
  display:flex;align-items:center;gap:clamp(14px,2vw,24px);
  padding:clamp(14px,1.6vw,20px);
  background:#fff;
  border:1px solid var(--fno-line);
  border-radius:var(--fno-radius);
  transition:.5s var(--fno-ease);
}
.fno-result__link:hover{
  border-color:transparent;box-shadow:var(--fno-shadow-m);transform:translateY(-3px);
}
.fno-result__thumb{
  flex:0 0 auto;
  inline-size:clamp(72px,9vw,120px);aspect-ratio:4/3;
  border-radius:3px;overflow:hidden;
  background:var(--fno-primary-soft);
  display:flex;align-items:center;justify-content:center;color:var(--fno-primary);
}
.fno-result__thumb img{inline-size:100%;block-size:100%;object-fit:cover}
.fno-result__body{min-inline-size:0;display:grid;gap:5px}
.fno-result__kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fno-primary);
}
.fno-result__kicker .fno-status{position:static;inset:auto;padding:4px 10px;font-size:.62rem}
.fno-result__title{font-family:var(--fno-font-h);font-size:1.1rem;color:var(--fno-ink);line-height:1.35}
.fno-result__excerpt{font-size:.9rem;color:var(--fno-body);display:block}
.fno-result__go{
  flex:0 0 auto;margin-inline-start:auto;color:var(--fno-primary);
  opacity:0;transform:translateX(-8px);transition:.45s var(--fno-ease);
}
.fno-result__link:hover .fno-result__go{opacity:1;transform:none}
[dir="rtl"] .fno-result__go svg{transform:scaleX(-1)}
@media (max-width:600px){
  .fno-result__excerpt{display:none}
}

/* =============================================================== 404 ==== */
.fno-404{position:relative;text-align:center;overflow:hidden}
.fno-404--image::before{
  content:"";position:absolute;inset:0;
  background-image:var(--fno-404-bg);background-size:cover;background-position:center;
  opacity:.12;
}
.fno-404__inner{position:relative;display:grid;justify-items:center;gap:18px;max-inline-size:660px;margin-inline:auto}
.fno-404__code{
  font-family:var(--fno-font-h);
  font-size:clamp(5rem,16vw,11rem);
  line-height:.85;font-weight:300;
  color:transparent;
  -webkit-text-stroke:1px var(--fno-primary);
  letter-spacing:.02em;
}
.fno-404__title{margin:0}
.fno-404__text{margin:0;max-inline-size:46ch}
.fno-404__form{inline-size:100%;max-inline-size:440px;margin-block:8px}
/* Archive description (category / tag / author) */
.fno-blogArchive__intro{
  max-inline-size:760px;
  margin-block-end:clamp(26px,3vw,42px);
  font-size:1.04rem;
  line-height:1.8;
}