/* =====================================================================
   Gorilla Marketing Experts — Blog (listing + single post)
   Values mirror the approved staging build (stg-gme.client-staging.io):
   hero 70/400 centred, a 2-up post grid on a 1120px row, and an article
   column of 1034px with 40/400 headings and 17/500 body copy.
   Loaded AFTER style.css.
   ===================================================================== */

/* ---------- Listing hero ---------- */
.blog-hero{ background:var(--ivory); text-align:center; padding:56px 0 52px; }
.blog-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:70px; line-height:1.14;
  letter-spacing:-1px; color:var(--ink);
}
.blog-hero-title .g{ color:var(--gold); }
.blog-hero-desc{
  max-width:1140px; margin:26px auto 0;
  font-size:17px; font-weight:500; line-height:1.5; color:#000;
}
/* the staging CTA is a pill, not the square site button */
.blog-hero .btn{
  margin-top:30px; height:auto; padding:14px 25px; border-radius:35px;
  font-size:18px; font-weight:600; color:#090909;
}

/* ---------- Post grid: 2 up, no card chrome ---------- */
.blog-list{ background:#fff; padding:46px 0 72px; }
.blog-grid{
  display:grid; grid-template-columns:repeat(2,1fr); column-gap:30px; row-gap:35px;
  max-width:1120px; margin-inline:auto;
}
.blog-card{ display:block; background:none; border:0; padding:0; }
.blog-card-media{ display:block; margin-bottom:20px; overflow:hidden; aspect-ratio:545/301; }
.blog-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-title{
  font-family:var(--font-body); font-size:19px; font-weight:600; line-height:1.2; color:#000;
}
.blog-card-title a{ color:#000; }
.blog-card-title a:hover{ color:#9a7400; }
.blog-card-more{
  display:inline-block; margin-top:8px;
  font-size:12px; font-weight:500; color:var(--gold);
}
.blog-card-more:hover{ text-decoration:underline; }

/* ---------- Single post ---------- */
.post{ background:#fff; padding:52px 0 0; }
/* calc keeps a 20px gutter on phones while still capping at the 798px the
   design uses from tablet up — the image never touches the screen edge */
.post-cover{
  display:block; width:calc(100% - 40px); max-width:798px; height:auto;
  margin:0 auto; border-radius:20px;
}
/* the article sits on a cream card so the long read is set off from the
   white page; the cover image stays outside it */
.post-wrap{
  max-width:1074px; margin:0 auto 72px; padding:44px 48px 48px;
  background:#FAF4E3; border:1px solid #EFE6CC; border-radius:20px;
}
/* the 103px cover-to-title gap from the design is split: 59px of page gap
   above the card + the card's own 44px of padding */
.post-wrap{ margin-top:59px; }
.post-title{
  font-family:var(--font-display); font-weight:400; font-size:40px; line-height:50px;
  color:#090909; margin:0 0 24px;
}
.post-wrap h2{
  font-family:var(--font-display); font-weight:400; font-size:40px; line-height:50px;
  color:#090909; margin:46px 0 18px;
}
.post-wrap h3{
  font-family:var(--font-display); font-weight:500; font-size:28px; line-height:1.2;
  color:#000; margin:26px 0 16px;
}
.post-wrap h4{ font-family:var(--font-display); font-weight:500; font-size:22px; color:#000; margin:22px 0 12px; }
.post-wrap p{ font-family:var(--font-body); font-size:17px; font-weight:500; line-height:35px; color:#000; margin:0 0 18px; }
.post-wrap a{ color:#9a7400; font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.post-wrap a:hover{ color:#000; }
.post-wrap strong{ font-weight:700; color:#000; }
.post-wrap ul,.post-wrap ol{ margin:0 0 20px; padding-left:24px; }
.post-wrap ul{ list-style:disc; }
.post-wrap ol{ list-style:decimal; }
.post-wrap li{ font-family:var(--font-body); font-size:17px; font-weight:500; line-height:32px; color:#000; margin-bottom:6px; }
.post-wrap li::marker{ color:var(--gold); }
.post-wrap blockquote{
  margin:26px 0; padding:18px 24px; border-left:3px solid var(--gold);
  background:#fffad9; font-size:18px; line-height:32px;
}
/* wide tables scroll inside their own box instead of stretching the page */
.post-wrap table{
  display:block; width:100%; overflow-x:auto; border-collapse:collapse;
  margin:26px 0; font-family:var(--font-body); font-size:15.3px; font-weight:500; color:#000;
  border:1px solid #e8e2d2;
}
.post-wrap th,.post-wrap td{ padding:12px 16px; border:1px solid #e8e2d2; text-align:left; vertical-align:top; line-height:28px; }
.post-wrap thead th,.post-wrap tr:first-child td{ background:#fffad9; font-weight:700; }

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .blog-hero-title{ font-size:54px; }
  .blog-grid{ max-width:none; }
  .post-title,.post-wrap h2{ font-size:34px; line-height:1.2; }
}
@media (max-width:900px){
  .blog-grid{ grid-template-columns:1fr; row-gap:30px; max-width:560px; }
}
/* style.css blanks every banner named *-hero to solid black below 1024px
   (that rule is meant for the dark page banners). The blog hero is a light
   section with dark text, so it keeps its ivory background. */
@media (max-width:1024px){
  .blog-hero{ background-color:var(--ivory) !important; }
}
@media (max-width:760px){
  .blog-hero{ padding:34px 0 32px; }
  .blog-hero-title{ font-size:34px; }
  .blog-hero-desc{ font-size:15px; line-height:1.6; margin-top:16px; }
  .blog-hero .btn{ font-size:16px; padding:13px 22px; margin-top:22px; }
  .blog-list{ padding:30px 0 44px; }
  .post{ padding:24px 0 0; }
  .post-cover{ border-radius:14px; }
  .post-wrap{ width:calc(100% - 40px); margin:26px auto 44px; padding:24px 20px 28px; border-radius:14px; }
  .post-title{ font-size:28px; line-height:1.22; margin:0 0 16px; }
  .post-wrap h2{ font-size:26px; line-height:1.24; margin:32px 0 14px; }
  .post-wrap h3{ font-size:21px; margin:22px 0 12px; }
  .post-wrap p,.post-wrap li{ font-size:16px; line-height:29px; }
}

/* ---------- FAQ accordion (matches the original numbered accordion) ----------
   Built on <details>/<summary> so it opens and closes without any JS and
   stays keyboard accessible; the first question is open by default. */
.faq-acc{ margin:8px 0 4px; }
.faq-item{
  border-radius:16px; padding:6px 10px; margin-bottom:6px;
  transition:background .2s ease, box-shadow .2s ease;
}
.faq-item[open]{ background:#FFFBEE; box-shadow:0 6px 24px rgba(0,0,0,.05); padding:14px 18px 6px; }
.faq-q{
  display:flex; align-items:center; gap:16px; cursor:pointer; list-style:none;
  padding:12px 4px; font-family:var(--font-display); font-size:21px; font-weight:500;
  line-height:1.3; color:#000;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-num{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:12px;
  font-family:var(--font-body); font-size:15px; font-weight:700; color:#8a8578; background:none;
  transition:.2s ease;
}
.faq-item[open] .faq-num{ background:var(--ink); color:#fff; }
.faq-text{ flex:1; }
.faq-ico{
  flex:none; position:relative; width:44px; height:44px; border-radius:12px;
  background:var(--gold); transition:transform .25s ease;
}
/* chevron drawn with two borders so no icon font is needed */
.faq-ico::after{
  content:""; position:absolute; left:50%; top:46%; width:11px; height:11px;
  border-right:2.5px solid var(--ink); border-bottom:2.5px solid var(--ink);
  transform:translate(-50%,-50%) rotate(45deg);
}
.faq-item[open] .faq-ico{ transform:rotate(180deg); }
.faq-a{ padding:0 4px 14px 64px; }
.faq-a p{ font-size:16.5px; line-height:32px; margin:0 0 12px; }
.faq-a p:last-child{ margin-bottom:0; }

@media (max-width:760px){
  .faq-item[open]{ padding:10px 12px 4px; }
  .faq-q{ gap:10px; font-size:17px; padding:10px 2px; }
  .faq-num{ width:34px; height:34px; border-radius:10px; font-size:13px; }
  .faq-ico{ width:34px; height:34px; border-radius:10px; }
  .faq-ico::after{ width:9px; height:9px; }
  .faq-a{ padding:0 2px 12px 44px; }
  .faq-a p{ font-size:15.5px; line-height:28px; }
}