/* =========================================================
   INTELLIGENT QUOTES — front page only
   Loaded in addition to styles.css. Holds the classes unique to
   the home page (Today, clickable quote card, category grid,
   Recent additions, "View more" trail links).
========================================================== */

/* "View more" link under sidebar lists */
.trail__more{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 12px; padding-left: 14px;
  font-family: var(--sans); font-size: 12.5px; font-weight:500;
  color: var(--ink-soft); transition: color .2s var(--ease);
}
.trail__more:hover{ color: var(--red); }
.trail__more .arr{ color: var(--red); font-size: 13px; }

/* whole quote card is a link to the quote page */
.qcard-link{
  display:block; border-radius:6px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.qcard-link:hover{ transform: translateY(-3px); }
.qcard-link:hover .qcard{ box-shadow: 0 30px 60px -26px rgba(158,32,23,.7); }
.qcard-link:focus-visible{ outline: 2px solid var(--red); outline-offset: 4px; }
.qcard-link .qcard{ cursor: pointer; }

/* today label above quote card */
.today{
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  display:flex; align-items:baseline; gap:.6em;
}
.today__label{
  font-family: var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color: var(--red);
}
.today__date{
  font-family: var(--serif); font-weight:600; font-size:30px;
  letter-spacing:-0.01em; color: var(--ink);
}

/* section heading (Browse the categories / Recent additions) */
.section-head{
  font-family: var(--serif); font-weight:600; font-size:23px;
  letter-spacing:.02em; text-transform:uppercase; margin:0;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.browse{ margin-top: 42px; }
.browse__head{ letter-spacing:.14em; font-size:19px; }
.catgrid{
  margin-top: 22px;
  display:grid; grid-template-columns: 1fr 1fr;
  column-gap: 44px; row-gap: 22px;
}
.cat{ min-width:0; }
.cat__title{
  font-family: var(--sans); font-weight:600; font-size:15px;
  letter-spacing:.01em; margin:0 0 5px;
  display:inline-block;
  transition: color .2s var(--ease);
}
.cat__title:hover{ color: var(--red); }
.cat__subs{
  font-family: var(--serif); font-size:18px; line-height:1.2;
  color: var(--ink-soft);
  white-space: nowrap; overflow: hidden;
}
.cat__subs a{
  transition: color .2s var(--ease);
}
.cat__subs a:hover{ color: var(--red); box-shadow: inset 0 -1px 0 var(--red); }
.cat__subs .sep{ color: var(--ink-faint); }
.cat__subs .more{
  color: var(--red); font-family: var(--sans); font-weight:600; font-size:15px;
  cursor:pointer; padding-left: 2px;
}
.cat__subs .more:hover{ color: var(--red-deep); }

/* recent additions */
.recent{ margin-top: 48px; }
.recent__head{ letter-spacing:.14em; font-size:19px; }
.recent__list{ list-style:none; margin:20px 0 0; padding:0; }
.recent__list li{
  display:flex; align-items:baseline; gap:16px;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}
.recent__list li:first-child{ border-top:0; }
.recent__date{
  flex:0 0 68px;
  font-family: var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color: var(--red);
  padding-top: 3px;
}
.recent__txt{
  font-family: var(--serif); font-size:19px; line-height:1.3; color: var(--ink);
}
.recent__txt a{
  box-shadow: inset 0 -1px 0 rgba(190,42,31,.28);
  transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.recent__txt a:hover{ color: var(--red); box-shadow: inset 0 -2px 0 var(--red); }

@media (max-width: 820px){
  .catgrid{ grid-template-columns: 1fr; }
}