/* =============================================================
   BLOG — posts synced from GoDaddy Marketing by blog-sync/sync_blog.py.
   Rides on top of styles.css (same tokens, fonts, nav, buttons).
   ============================================================= */

.blogwrap {
  max-width: 1180px; margin: 0 auto;
  padding: clamp(7rem, 12vw, 10rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}

/* ---------- Index head ---------- */
.blog__head { max-width: 640px; margin-bottom: clamp(2.8rem, 6vw, 4.2rem); }
.blog__empty {
  color: var(--slate-lite); font-size: 1.05rem; line-height: 1.8;
  border-left: 2px solid var(--gold); padding-left: 1.3rem; max-width: 46ch;
}

/* ---------- Post grid ----------
   Asymmetric on desktop: the newest post runs full width as a wide banner,
   the rest sit in a two-up. Keeps the latest article doing real work instead
   of a flat uniform card wall. */
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem); }
.pgrid .pcard:first-child { grid-column: 1 / -1; }

.pcard {
  background: var(--graphite); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.pcard:hover { border-color: rgba(184,155,94,.55); transform: translateY(-3px); }
.pcard__link { display: block; height: 100%; }
.pgrid .pcard:first-child .pcard__link { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; }

.pcard__media { overflow: hidden; background: #141414; aspect-ratio: 16 / 9; }
.pgrid .pcard:first-child .pcard__media { aspect-ratio: auto; min-height: 300px; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__media--empty {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(184,155,94,.14), transparent 62%),
    var(--graphite);
}

.pcard__body { padding: clamp(1.3rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.pcard__body time { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-lite); }
.pcard__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.02; letter-spacing: .01em; margin: 0;
}
.pgrid .pcard:first-child .pcard__title { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.pcard__excerpt { color: var(--slate-lite); font-size: .95rem; line-height: 1.75; margin: 0; }
.pcard__more { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-lite); margin-top: .3rem; }

/* ---------- Single post ---------- */
.post { max-width: 760px; margin: 0 auto; }
.post__back { margin: 0 0 2rem; }
.post__back a { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-lite); }
.post__back a:hover { color: var(--gold-lite); }

.post__head { margin-bottom: 2.2rem; }
.post__head time { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-lite); }
.post__title {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .92; letter-spacing: .01em;
  margin: .6rem 0 0;
}
.post__hero { border-radius: var(--radius); overflow: hidden; margin-bottom: 2.6rem; border: 1px solid var(--line); }
.post__hero img { width: 100%; height: auto; display: block; }

/* Content comes from the client's GoDaddy editor, so style generically by tag. */
.post__body { color: #d8d5ce; font-size: 1.05rem; line-height: 1.85; }
.post__body > * + * { margin-top: 1.3rem; }
.post__body h2, .post__body h3 {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.06; color: var(--white);
  margin-top: 2.6rem; margin-bottom: -.2rem;
}
.post__body h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.post__body h3 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.post__body a { color: var(--gold-lite); text-decoration: underline; text-underline-offset: 3px; }
.post__body a:hover { color: var(--white); }
.post__body img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; }
.post__body ul, .post__body ol { padding-left: 1.3rem; }
.post__body li + li { margin-top: .5rem; }
.post__body li::marker { color: var(--gold); }
.post__body blockquote {
  border-left: 2px solid var(--gold); padding: .2rem 0 .2rem 1.3rem;
  color: var(--white); font-style: italic;
}
.post__body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.post__body th, .post__body td { border: 1px solid var(--line); padding: .7rem .9rem; text-align: left; }

/* ---------- Footer CTA ---------- */
.blogfoot {
  border-top: 1px solid var(--line); background: var(--graphite);
  padding: clamp(3rem, 7vw, 5rem) var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center;
}
.blogfoot__tag {
  font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  text-transform: uppercase; letter-spacing: .03em; margin: 0; color: var(--white);
}
.blogfoot__meta { font-size: .8rem; color: var(--slate-lite); margin: 0; }
.blogfoot__meta a { color: var(--gold-lite); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .pgrid { grid-template-columns: 1fr; }
  .pgrid .pcard:first-child .pcard__link { grid-template-columns: 1fr; }
  .pgrid .pcard:first-child .pcard__media { aspect-ratio: 16 / 9; min-height: 0; }
}