/* ================================================================
   CARDS
   Article cards, featured cards, horizontal scroll cards,
   beauty tiles, fun tiles, author cards.
   ================================================================ */

/* --- ARTICLE CARD --- */
.acard {
  background: white;
  cursor: pointer;
  transition: all var(--speed-mid);
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.acard:hover,
.acard:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.acard:hover .acard__thumb-inner,
.acard:focus-visible .acard__thumb-inner {
  transform: scale(1.05);
}

.acard__thumb {
  overflow: hidden;
  position: relative;
}

.acard__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, .4), rgba(200, 240, 0, .15));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity .3s;
}

.acard:hover .acard__thumb::after { opacity: .5; }

.acard__thumb-inner {
  transition: transform .55s var(--ease-out);
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
}

/* Thumb color variants */
.acard__thumb-inner--fashion { background: linear-gradient(135deg, #1a3a2a, #2d5c42); }
.acard__thumb-inner--beauty  { background: linear-gradient(135deg, #2d1a3a, #5c2d5c); }
.acard__thumb-inner--travel  { background: linear-gradient(135deg, #1a2d3a, #2d4a5c); }
.acard__thumb-inner--fun     { background: linear-gradient(135deg, #3a2d1a, #5c4a2d); }

.acard__body {
  padding: 20px 22px 24px;
}

.acard__cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.acard__cat--fashion { background: var(--clr-green);     color: var(--clr-chartreuse); }
.acard__cat--beauty  { background: var(--clr-beauty-bg);  color: var(--clr-beauty-txt); }
.acard__cat--travel  { background: var(--clr-travel-bg);  color: var(--clr-travel-txt); }
.acard__cat--fun     { background: var(--clr-fun-bg);     color: var(--clr-fun-txt); }

.acard__title {
  font-family: var(--ff-display);
  font-size: 22px;
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--clr-ink);
  margin-bottom: 8px;
}

.acard__excerpt {
  font-size: 13px;
  color: var(--clr-smoke);
  line-height: 1.65;
  margin-bottom: 14px;
  font-family: var(--ff-serif);
  font-style: italic;
}

.acard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
}

.acard__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.avatar--green  { background: linear-gradient(135deg, var(--clr-green), var(--clr-green-mid)); }
.avatar--purple { background: linear-gradient(135deg, #6a2a8a, #9a4aaa); }
.avatar--blue   { background: linear-gradient(135deg, #1a3a6a, #2a5a9a); }
.avatar--orange { background: linear-gradient(135deg, #6a4a1a, #9a742a); }

.acard__author {
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-green);
  letter-spacing: .04em;
}

.acard__date {
  font-size: 11px;
  color: var(--clr-mist);
  margin-left: auto;
}

/* --- FEATURED CARD --- */
.fcard {
  background: var(--clr-green);
  cursor: pointer;
  transition: all var(--speed-mid);
  overflow: hidden;
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-decoration: none;
  color: inherit;
}

.fcard:hover,
.fcard:focus-visible {
  box-shadow: var(--shadow-heavy);
}

.fcard:hover .fcard__img-inner { transform: scale(1.04); }

.fcard__img { overflow: hidden; }

.fcard__img-inner {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 96px;
  transition: transform .55s var(--ease-out);
  position: relative;
}

.fcard__img-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 60%, var(--clr-green));
  pointer-events: none;
}

.fcard__img-inner--fashion { background: linear-gradient(160deg, var(--clr-green-mid), var(--clr-green-deep)); }
.fcard__img-inner--beauty  { background: linear-gradient(160deg, #3a1a4a, #1a0a2a); }
.fcard__img-inner--travel  { background: linear-gradient(160deg, #1a2d3a, #0a1a2a); }
.fcard__img-inner--fun     { background: linear-gradient(160deg, #3a2d0a, #1a1500); }

.fcard__body {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fcard__eyebrow {
  font-family: var(--ff-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(200, 240, 0, .6);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fcard__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(200, 240, 0, .4);
}

.fcard__title {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: .03em;
  line-height: 1.05;
  color: white;
  margin-bottom: 14px;
}

.fcard__title em {
  font-style: normal;
  color: var(--clr-chartreuse);
}

.fcard__sub {
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.7;
  margin-bottom: 28px;
  font-family: var(--ff-serif);
  font-style: italic;
}

/* --- HORIZONTAL SCROLL CARD --- */
.hs-card {
  width: 280px;
  flex-shrink: 0;
  background: white;
  cursor: pointer;
  transition: all var(--speed-mid);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.hs-card:hover,
.hs-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}

.hs-card:hover .hs-card__thumb-inner { transform: scale(1.06); }

.hs-card__thumb {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.hs-card__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 58, 42, .45), rgba(200, 240, 0, .2));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hs-card__thumb-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  transition: transform .5s var(--ease-out);
}

.hs-card__body {
  padding: 18px 20px 22px;
}

.hs-card__cat {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hs-card__title {
  font-family: var(--ff-display);
  font-size: 19px;
  letter-spacing: .03em;
  line-height: 1.1;
  color: var(--clr-ink);
  margin-bottom: 6px;
}

.hs-card__meta {
  font-size: 11px;
  color: var(--clr-mist);
  font-weight: 500;
  letter-spacing: .04em;
}

/* --- BEAUTY TILES --- */
.beauty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.beauty-tile {
  background: white;
  padding: 28px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}

.beauty-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--clr-green);
  transform: scaleX(0);
  transition: transform .25s;
}

.beauty-tile:hover,
.beauty-tile:focus-visible {
  background: var(--clr-green-mist);
}

.beauty-tile:hover::after,
.beauty-tile:focus-visible::after {
  transform: scaleX(1);
}

.beauty-tile__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: var(--space-md);
  border-radius: var(--radius);
}

.beauty-tile__icon--1 { background: var(--clr-green); }
.beauty-tile__icon--2 { background: linear-gradient(135deg, #3a1a4a, #6a2a8a); }
.beauty-tile__icon--3 { background: linear-gradient(135deg, #1a2d3a, #2a4a6a); }
.beauty-tile__icon--4 { background: linear-gradient(135deg, var(--clr-green-deep), var(--clr-green-mid)); }

.beauty-tile__title {
  font-family: var(--ff-display);
  font-size: 20px;
  letter-spacing: .04em;
  color: var(--clr-ink);
  margin-bottom: 6px;
}

.beauty-tile__desc {
  font-size: 13px;
  color: var(--clr-smoke);
  line-height: 1.6;
  font-family: var(--ff-serif);
  font-style: italic;
}

/* --- FUN STRIP --- */
.fun-strip {
  background: var(--clr-green);
  padding: 2px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.fun-tile {
  background: var(--clr-green-deep);
  padding: 28px 24px;
  cursor: pointer;
  transition: background var(--speed-fast);
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.fun-tile:hover,
.fun-tile:focus-visible {
  background: var(--clr-green-mid);
}

.fun-tile__number {
  font-family: var(--ff-display);
  font-size: 64px;
  letter-spacing: .02em;
  color: rgba(200, 240, 0, .12);
  line-height: 1;
  margin-bottom: 10px;
}

.fun-tile__title {
  font-family: var(--ff-display);
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--clr-chartreuse);
  margin-bottom: 6px;
  line-height: 1.1;
}

.fun-tile__desc {
  font-size: 12px;
  color: rgba(255, 255, 255, .45);
  line-height: 1.6;
  font-family: var(--ff-serif);
  font-style: italic;
}

.fun-tile__arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 18px;
  color: rgba(200, 240, 0, .2);
  transition: all .2s;
}

.fun-tile:hover .fun-tile__arrow { color: var(--clr-chartreuse); }

/* --- AUTHOR CARDS --- */
.author-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.au-card {
  background: white;
  padding: 32px;
  cursor: pointer;
  transition: all var(--speed-mid);
  border-top: 3px solid transparent;
  position: relative;
  overflow: hidden;
}

.au-card:hover,
.au-card:focus-visible {
  background: var(--clr-green-mist);
  border-top-color: var(--clr-green);
}

.au-card__avatar {
  width: 68px;
  height: 68px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-display);
  font-size: 24px;
  letter-spacing: .06em;
  color: white;
  margin-bottom: 20px;
  background: var(--clr-green);
}

.au-card__name {
  font-family: var(--ff-display);
  font-size: 24px;
  letter-spacing: .05em;
  color: var(--clr-ink);
  margin-bottom: 4px;
}

.au-card__role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--clr-green-light);
  margin-bottom: 14px;
}

.au-card__bio {
  font-size: 13px;
  color: var(--clr-smoke);
  line-height: 1.65;
  font-family: var(--ff-serif);
  font-style: italic;
  margin-bottom: 16px;
}

.au-card__tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.au-card__tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--radius);
  background: var(--clr-green-mist);
  color: var(--clr-green);
}