/* Generect blog design (GTM-694): the generect.com hero for the blog.
   Headers of posts, the blog home and categories: cream with the hero square grid, Murs Gothic
   Wide Dark (700) caps sized by length, the lede in a yellow card with a black border, blue pixel
   squares. Post cards: cream with a black border, yellow on hover. Red only fills shapes. */

.gph {
  --gph-yellow: #F4BD38;
  --gph-blue: #5F6BDE;
  position: relative;
  overflow: hidden;
  padding: 40px 0 48px;
  color: #000;
  font-family: "Murs Gothic", sans-serif;
}
.gph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='114' height='114'%3E%3Crect x='13' y='13' width='88' height='88' rx='6' fill='none' stroke='%23000' stroke-opacity='0.06' stroke-width='2'/%3E%3C/svg%3E");
  background-position: center top;
  background-size: 74px 74px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}
.gph .container { position: relative; }
.gph a { color: inherit; }
.gph__art { display: none; }

.gph-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 28px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.gph .gph-crumbs a { color: var(--gph-blue); }
.gph .gph-crumbs a:hover { color: #000; }

.gph-brands { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.gph-brands__generect { display: block; width: auto; height: 30px; }
.gph-brands__x { font-weight: 700; font-size: 18px; line-height: 1; }
.gph-brands__client {
  display: block;
  width: auto;
  max-width: 170px;
  height: 22px;
  object-fit: contain;
  object-position: left center;
}

.gph-title {
  margin: 0;
  font-family: "Murs Gothic", sans-serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
  overflow-wrap: break-word;
  font-size: clamp(calc(var(--m) * 1px), calc(var(--d) * 100vw / 1440), calc(var(--d) * 1px));
}
.gph-len-s  { --d: 72; --m: 38; }
.gph-len-m  { --d: 62; --m: 33; }
.gph-len-l  { --d: 54; --m: 30; }
.gph-len-xl { --d: 48; --m: 27; }

.gph-lede {
  max-width: 620px;
  margin: 28px 0 0;
  padding: 20px 22px;
  background: var(--gph-yellow);
  border: 2px solid #000;
  border-radius: 16px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
}

.gph-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
}
.gph-author { display: flex; align-items: center; gap: 14px; }
.gph-author img {
  width: 52px;
  height: 52px;
  max-width: none;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}
.gph-author__txt { display: flex; flex-direction: column; gap: 3px; }
.gph-author__name { font-size: 17px; line-height: 1.25; }
.gph-author__role { font-size: 12px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; }
.gph-facts { display: flex; flex-direction: column; gap: 4px; }
.gph-dot { margin-left: 0.45em; }
.gph-nowrap { white-space: nowrap; }
.gph-read { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.gph-read i { font-size: 15px; }
.gph-pixels { display: block; width: 100%; height: auto; }

.gph-crumbs__here { color: #000; }

/* The heart assembles once (generect-blog-design.php): html.gph-anim hides the SVG from the first paint, the video
   sits on it, and the SVG comes back when the video ends (the video then fades out over it) or fails. If the script
   never runs, it shows after 3 s.
   The video is the mark at 78 % of its width, so 1/0.78 of the slot and centred; darken lets the grid through and
   hides its cream, 1 level off the page. */
.gph-anim .gph__art .gph-pixels { visibility: hidden; animation: gph-show 0s 3s forwards; }
.gph-anim .gph__art.gph-art--video .gph-pixels { visibility: hidden; animation: none; }
.gph-anim .gph__art.gph-art--done .gph-pixels { visibility: visible; animation: none; }
@keyframes gph-show { to { visibility: visible; } }
.gph-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 128.205%;
  max-width: none;
  height: auto;
  aspect-ratio: 720 / 600;
  transform: translate(-50%, -50%);
  mix-blend-mode: darken;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gph-video--out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .gph-anim .gph__art .gph-pixels { visibility: visible; animation: none; }
  .gph-video { display: none; }
}

/* Phones: the pixel heart in the top right corner, level with the breadcrumb (every header has one) */
@media (max-width: 991.98px) {
  .gph__in { position: relative; }
  .gph__art { display: block; position: absolute; top: -4px; right: 0; width: 56px; color: var(--gph-blue); }
  .gph-crumbs { padding-right: 72px; }
}

/* The breadcrumb replaces the theme's "Go back"; the text starts closer to the header. */
.gph ~ .container .post-single__content-flex { display: none; }
.gph ~ .container .post-single__content { padding-top: 32px; }

@media (min-width: 992px) {
  .gph { padding: 56px 0 64px; }
  .gph::before { background-size: 114px 114px; }
  .gph__in { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: center; }
  .gph__art { display: block; position: relative; color: var(--gph-blue); }
  .gph-brands { gap: 14px; }
  .gph-brands__generect { height: 36px; }
  .gph-brands__client { max-width: 230px; height: 28px; }
  .gph-lede { padding: 24px 28px; font-size: 16px; }
  .gph-meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 36px; }
  .gph ~ .container .post-single__content { padding-top: 48px; }
  .gph ~ .container .post-single__content-row .col-lg-4 > .post-single__sitebar { padding-top: 48px; }
}

/* ---------- list headers: blog home, categories ---------- */

.gph-lede p { margin: 0; }
.gph-lede p + p { margin-top: 0.6em; }
.gph-subscribe { max-width: 620px; margin-top: 24px; }
.gph-subscribe .wpcf7-form-control-wrap input { border: 2px solid #000; background: #fff; }
.gph-subscribe .wpcf7-submit { border: 2px solid #000; }
.gph-count { margin: 20px 0 0; font-weight: 500; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; }
.gph--home + .popular-posts,
.gph--category + .blog-posts__cards { margin-top: 0; }
.archive-posts:has(> .gph) { padding-top: 0; }

/* ---------- post cards (theme markup, restyled) ---------- */

.post-card {
  background: transparent;
  border: 2px solid #000;
  border-radius: 16px;
  transition: background-color 0.2s ease-in-out;
}
.post-card:hover { transform: none; background-color: var(--gph-card-hover, #F4BD38); }
.post-card__thumbnail { display: none; }
.post-card__flex { padding: 22px 22px 20px; }
@media (max-width: 1399.91px) { .post-card__flex { gap: 32px; } }
@media (min-width: 1400px) { .post-card__flex { gap: 48px; } }
.post-card__header-flex { gap: 12px; margin-bottom: 18px; }
.post-card__category-link,
a.post-card__category-link {
  display: inline-block;
  padding: 5px 8px 4px;
  border-radius: 6px;
  background: #000;
  color: #F4F2EE;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
a.post-card__category-link:hover { background: #333; color: #F4F2EE; }
.post-card__date { font-size: 12px; white-space: nowrap; }
.post-card__title,
.post-card__title:hover { gap: 12px; color: #000; }
.post-card__title-item { margin: 0; font-weight: 700; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.12; }
.post-card__title-description { max-width: none; font-size: 14px; line-height: 1.45; }
.post-card__footer { align-items: center; gap: 16px; }
.post-card__author,
.post-card__author:hover { color: #000; min-width: 0; }
/* webhavva-blocks.css forces min-width: 50px on this image, which made it an oval */
.post-card__author img { width: 40px; min-width: 40px; max-width: 40px; height: 40px; object-fit: cover; flex-shrink: 0; }
.post-card__author-position { font-size: 9px; letter-spacing: 0.05em; }
.post-card__reading { flex-direction: row; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.post-card__reading span {
  order: 2;
  padding: 0;
  background: none;
  color: #000;
  transform: none;
  font-size: 13px;
  text-transform: none;
}
.post-card__reading i {
  order: 1;
  padding: 0;
  background: none;
  color: #000;
  transform: none;
  font-size: 14px;
}

/* category links above "All articles": outlined like the tabs on generect.com */
.blog-posts__categories a {
  background: transparent;
  border: 2px solid #000;
  border-radius: 8px;
  color: #000;
  font-weight: 700;
  font-size: 13px;
}
.blog-posts__categories a:hover { transform: none; background: #F4BD38; color: #000; }
.blog-posts__categories .current-cat > a { background: #F4BD38; }
.blog-posts__search { border-right-color: #000; }