/* =============================================================================
 * GTA TV Wall Mounting — blog index (/blog/) card grid
 * -----------------------------------------------------------------------------
 * Hand-authored. Lives in assets/css/site/ for the same reason blog-article.css
 * does: assets/css/generated/ is Elementor build output and must not be
 * hand-edited, and theme/, lib/ and vendor/ are third-party. This file only
 * OVERRIDES those, so deleting it restores the previous appearance exactly.
 *
 * WHAT IT CHANGES
 * The page ships the ElementsKit "blog posts" widget in its stacked-list form:
 * 17 full-width rows, each split 50/50 with the thumbnail on the left. That
 * reads as a 2018 archive page — one post per screen, no scanability, and a
 * 50%-width image on every row that fights the text for attention.
 * This turns the same markup into a card grid: the newest post as a wide
 * featured card, the rest as three-up cards with the image on top. No markup is
 * restructured; the only page-side change is a scope class on the container.
 *
 * EVERY value below is from DESIGN_LANGUAGE.md — no new colors, fonts or type
 * sizes. Token -> value mapping (same set blog-article.css cites):
 *   heading text   #171717   (--e-global-color-primary)
 *   body text      #000000   (--e-global-color-text)
 *   brand accent   #FDBF0F   (--e-global-color-secondary)
 *   accent dark    #C48E02   (--e-global-color-accent)
 *   link hover     #0C31AC   (--e-global-color-9047768)
 *   light bg       #F9F9F9   (--e-global-color-1c42373)
 *   divider gray   #DBDBDB   (--e-global-color-40e90f2)
 *   headings Montserrat 700 / 1.2em      body Heebo 400
 *   card title sizes are documented scale steps: h4 1.625rem, h5 1.25rem
 *   meta label reuses the documented button type: Inter 500 .813rem, ls 1.2px
 *
 * Everything is scoped under .gtv-blogx so it cannot reach another page.
 * ========================================================================== */

.gtv-blogx{
  --bx-ink:#171717; --bx-body:#000; --bx-accent:#FDBF0F; --bx-accent-dk:#C48E02;
  --bx-hover:#0C31AC; --bx-line:#DBDBDB; --bx-bg:#F9F9F9;
  --bx-gap:28px;
}

/* --- 1. The grid --------------------------------------------------------- */
/* Six fixed tracks rather than auto-fit, for the reason documented in
   blog-article.css §5: with auto-fit the column count follows the container
   width, so a known post count can land on an arbitrary number of columns and
   orphan its last row. Breakpoints own the column count; cards change span. */
.gtv-blogx.post-items{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:var(--bx-gap); margin:0; padding:0;
}
/* The widget wraps each post in its own .ekit-col-12. Those become the grid
   items; their float/width from the ekit grid system is neutralised here. */
/* Base is the one-across (mobile) case; the breakpoints in §3 add columns. Each
   span rule lives inside the media query that owns it — an unscoped desktop
   orphan guard also fires at tablet, where the row maths is different, and
   strands cards on rows of their own. */
.gtv-blogx > .ekit-col-12{
  float:none; width:auto; max-width:none; padding:0; margin:0;
  grid-column:span 6;
  display:flex;                             /* lets the card fill the row */
}

/* --- 2. (span rules live in §3, per breakpoint) --------------------------- */

/* --- 3. Columns and orphan control ---------------------------------------- */
/* The newest post always spans the full width, so the multi-column rows start
   at child 2. That shifts the row-start arithmetic: at three across a row
   starts on 3n+2, at two across on an even child. A trailing row must never
   hold a single narrow card — same rule and reasoning as .gta-glance in
   blog-article.css. */
@media (min-width:601px) and (max-width:900px){          /* two across */
  .gtv-blogx > .ekit-col-12{ grid-column:span 3; }
  .gtv-blogx > .ekit-col-12:first-child{ grid-column:span 6; }
  /* cards 2..N pair up, so the last card is alone only when N is even */
  .gtv-blogx > .ekit-col-12:last-child:nth-child(even){ grid-column:span 6; }
}
@media (min-width:901px){                                 /* three across */
  .gtv-blogx > .ekit-col-12{ grid-column:span 2; }
  .gtv-blogx > .ekit-col-12:first-child{ grid-column:span 6; }
  /* N ≡ 2 (mod 3): the lone trailing card takes the whole row */
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2){ grid-column:span 6; }
  /* N ≡ 0 (mod 3): the trailing pair splits the row in half */
  .gtv-blogx > .ekit-col-12:nth-last-child(2):nth-child(3n+2),
  .gtv-blogx > .ekit-col-12:nth-last-child(2):nth-child(3n+2) ~ .ekit-col-12{
    grid-column:span 3;
  }
}

/* --- 4. The card ---------------------------------------------------------- */
.gtv-blogx .elementskit-blog-block-post{
  margin:0; width:100%; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--bx-line); border-radius:10px;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gtv-blogx .elementskit-blog-block-post:hover{
  transform:translateY(-4px); border-color:var(--bx-accent);
  box-shadow:0 10px 28px rgba(23,23,23,.10);
}
/* Stack thumbnail over body: the widget's inner row is a 50/50 split. */
.gtv-blogx .elementskit-blog-block-post > .ekit-row{
  display:flex; flex-direction:column; flex:1 1 auto; margin:0;
}
.gtv-blogx .elementskit-blog-block-post > .ekit-row > [class*="ekit-col-"]{
  float:none; width:100%; max-width:100%; padding:0; flex:0 0 auto;
}
.gtv-blogx .elementskit-blog-block-post > .ekit-row > .ekit-col-6.order-2{
  flex:1 1 auto; display:flex;
}

/* --- 5. Thumbnail --------------------------------------------------------- */
/* A fixed ratio is what makes a grid read as a grid: the source images vary
   from 4:3 to 21:9, and without this the title baselines never line up. */
.gtv-blogx .elementskit-entry-thumb{ display:block; overflow:hidden; }
.gtv-blogx .elementskit-entry-thumb img{
  display:block; width:100%; height:100%; aspect-ratio:16/9;
  object-fit:cover; border-radius:0;
  transition:transform .35s ease;
}
.gtv-blogx .elementskit-blog-block-post:hover .elementskit-entry-thumb img{
  transform:scale(1.04);
}

/* --- 6. Card body --------------------------------------------------------- */
.gtv-blogx .elementskit-post-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:20px 22px 22px; width:100%;
}
.gtv-blogx .post-meta-list{
  margin:0 0 10px; padding:0; list-style:none;
  font-family:"Inter",sans-serif; font-size:.813rem; font-weight:500;
  text-transform:uppercase; letter-spacing:1.2px; color:var(--bx-accent-dk);
}
.gtv-blogx .post-meta-list .meta-date{ display:inline-flex; align-items:center; gap:7px; }
/* The calendar glyph is an ElementsKit icon-font character (icon-* prefix,
   served by ekiticons.css). Size it, never replace it. */
.gtv-blogx .post-meta-list i{ font-size:.9em; line-height:1; }

.gtv-blogx .entry-title{
  margin:0 0 10px; font-family:"Montserrat",sans-serif; font-weight:700;
  font-size:1.25rem; line-height:1.3em; text-transform:none;
}
.gtv-blogx .entry-title a{ color:var(--bx-ink); text-decoration:none; }
.gtv-blogx .entry-title a:hover,
.gtv-blogx .entry-title a:focus{ color:var(--bx-hover); }

.gtv-blogx .elementskit-post-footer{ margin:0; }
.gtv-blogx .elementskit-post-footer p{
  margin:0; font-family:"Heebo",sans-serif; font-size:1rem; font-weight:400;
  line-height:1.75em; color:var(--bx-body);
  /* Excerpt lengths run from one line to a full paragraph. Clamping is what
     keeps every card in a row the same height without truncating in the HTML,
     so the full text stays available to crawlers and AI readers. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
}

/* --- 7. Full-width cards go side-by-side ---------------------------------- */
/* Any card occupying a whole row switches to image-left / text-right. Stacking
   it instead would put a 1300px-wide 16:9 photo above three lines of text.
   This covers both the featured post and a lone trailing card promoted to full
   width by the orphan guard; only the featured one gets the tinted panel, so it
   still reads as the lead item rather than a second hero at the foot of the page. */
@media (min-width:901px){
  .gtv-blogx > .ekit-col-12:first-child .elementskit-blog-block-post{
    background:var(--bx-bg);
  }
  .gtv-blogx > .ekit-col-12:first-child .elementskit-blog-block-post > .ekit-row,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-blog-block-post > .ekit-row{
    flex-direction:row; align-items:stretch;
  }
  .gtv-blogx > .ekit-col-12:first-child .ekit-col-6.order-1,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .ekit-col-6.order-1{
    width:52%; flex:0 0 52%;
  }
  .gtv-blogx > .ekit-col-12:first-child .ekit-col-6.order-2,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .ekit-col-6.order-2{
    width:48%; flex:0 0 48%;
  }
  .gtv-blogx > .ekit-col-12:first-child .elementskit-entry-thumb,
  .gtv-blogx > .ekit-col-12:first-child .elementskit-entry-thumb img,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-entry-thumb,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-entry-thumb img{
    height:100%;
  }
  .gtv-blogx > .ekit-col-12:first-child .elementskit-entry-thumb img,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-entry-thumb img{
    aspect-ratio:auto; min-height:300px;
  }
  .gtv-blogx > .ekit-col-12:first-child .elementskit-post-body,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-post-body{
    justify-content:center; padding:34px 38px;
  }
  .gtv-blogx > .ekit-col-12:first-child .entry-title,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .entry-title{
    font-size:1.625rem;
  }
  .gtv-blogx > .ekit-col-12:first-child .elementskit-post-footer p,
  .gtv-blogx > .ekit-col-12:last-child:nth-child(3n+2) .elementskit-post-footer p{
    -webkit-line-clamp:4;
  }
}

/* --- 8. Small screens ----------------------------------------------------- */
/* One across is the base case in §1, so nothing here changes the grid — only
   the breathing room, which is too generous on a phone. */
@media (max-width:600px){
  .gtv-blogx.post-items{ gap:20px; }
  .gtv-blogx .elementskit-post-body{ padding:18px 18px 20px; }
}

/* --- 9. Hero image -------------------------------------------------------- */
/* The section shipped with a photo of the back panel of a ceiling projector —
   off-topic for a TV mounting blog and unreadable at hero scale. Overridden
   here rather than in assets/css/generated/, which is build output. The
   gradient overlay and every other hero property are left untouched. */
.elementor-2435 .elementor-element.elementor-element-6498f063:not(.elementor-motion-effects-element-type-background){
  background-image:url("/assets/images/about-us/about-hero-installation.jpg");
  background-position:center center;
}