/* Article template styling - v2 redesign */

/* Drop cap on first paragraph of article body */
.wp-block-post-content > p:first-of-type::first-letter {
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding-right: 0.09em;
  padding-top: 0.04em;
  color: #C1502E;
}

/* Byline strip under the hero title */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: "Inter", sans-serif;
  font-size: 0.85em;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #FAF8F3;
  opacity: 0.9;
}
.article-byline .wp-block-post-terms a {
  background: #C1502E;
  color: #FAF8F3;
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.9em;
  letter-spacing: 0.03em;
}
.article-byline .wp-block-post-author__name,
.article-byline time {
  color: #FAF8F3;
  opacity: 0.85;
}

/* Restyled quick-reference table inside article body */
.wp-block-post-content .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-size: 0.95em;
}
.wp-block-post-content .wp-block-table thead th {
  background: #15181C;
  color: #FAF8F3;
  font-family: "Fraunces", serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8em;
  padding: 14px 18px;
  text-align: left;
}
.wp-block-post-content .wp-block-table td,
.wp-block-post-content .wp-block-table th {
  padding: 14px 18px;
  border-bottom: 1px solid #e7ddd0;
}
.wp-block-post-content .wp-block-table tbody tr:nth-child(even) {
  background: #F4E3DC;
}
.wp-block-post-content .wp-block-table tbody tr:last-child td {
  border-bottom: none;
}

/* Full-bleed article hero with overlay + byline */
.article-hero {
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 62vh !important;
  padding: 56px 64px 64px !important;
  margin: 0 !important;
}
.article-hero-media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.article-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,24,28,0.9), rgba(21,24,28,0.25) 55%, rgba(21,24,28,0.55));
  z-index: 1;
}
.article-hero-title {
  position: relative;
  z-index: 2;
  margin-bottom: 18px !important;
  max-width: 900px;
}
.article-hero .article-byline {
  position: relative;
  z-index: 2;
}
@media (max-width: 782px) {
  .article-hero {
    min-height: 46vh;
    padding: 32px 24px 36px;
  }
}

/* Homepage "Latest guides" card grid  consistent image sizing (v3 redesign) */
.post-thumbnail {
	  position: relative;
	  overflow: hidden;
	  border-radius: 16px;
	  margin: 0;
}
.post-thumbnail::before {
	  content: "";
	  display: block;
	  padding-top: 66.67%;
}
.post-thumbnail img.wp-post-image {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  object-fit: cover;
}
}
}
}

/* Mobile: comparison tables scroll horizontally instead of squeezing columns */
@media (max-width: 781px) {
  .wp-block-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .wp-block-table table.has-fixed-layout {
    table-layout: auto;
    width: auto;
    min-width: 600px;
  }
  .wp-block-table table.has-fixed-layout th,
  .wp-block-table table.has-fixed-layout td {
    white-space: nowrap;
  }
}


/* Uniform product photo sizing across all articles + screen sizes */
.wp-block-post-content figure.wp-block-image {
  margin: 28px auto;
}
.wp-block-post-content figure.wp-block-image img {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: transparent;
  border-radius: 12px;
  display: block;
}


/* Fix: article hero image was capped at 800px (theme wide-size), leaving a bare
   gradient strip beside it on larger screens. Force it to fill the full hero width. */
.article-hero-media {
  max-width: 100% !important;
}