/* ============================================================
   Camera Exchange Blog Builder — styling.
   Loaded automatically by the plugin on every page load (see
   tcex-blog-builder.php) — you don't paste this anywhere yourself.

   Every rule is scoped to .tcex-blog-template — the wrapper div
   [tcex_blog_index] (and the individual [tcex_*] shortcodes) output
   — so this can't affect your header, footer, or anything else on
   the site, no matter how many pages use the shortcode.

   These class names are the ones the plugin's PHP itself outputs,
   so they're guaranteed to match.
   ============================================================ */

.tcex-blog-template{
  --tcex-blue:#0268a6;
  --tcex-red:#d43e3e;
  --tcex-ink:#111111;
  --tcex-bg:#f4f3f0;
  --tcex-line:#dddad4;
}

/* Hero */
.tcex-blog-template .tcex-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;padding:40px 0;}
.tcex-blog-template .tcex-hero h1{font-size:96px;font-weight:800;line-height:0.9;margin:0 0 16px;}
.tcex-blog-template .tcex-hero-text p{max-width:420px;font-size:16px;color:#444;}
.tcex-blog-template .tcex-search{display:flex;flex-direction:column;gap:8px;min-width:260px;}
.tcex-blog-template .tcex-search label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#777;}
.tcex-blog-template .tcex-search-row{display:flex;gap:0;}
.tcex-blog-template .tcex-search input{border:1px solid var(--tcex-line);border-right:none;padding:12px 14px;font-size:14px;width:100%;box-sizing:border-box;}
.tcex-blog-template .tcex-search button{background:var(--tcex-blue);color:#fff;border:1px solid var(--tcex-blue);padding:0 22px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;}
.tcex-blog-template .tcex-search button:hover{opacity:.9;}

/* Category pills — output by [tcex_categories] — a bordered row of
   cells (like table cells): each pill has a vertical divider on its
   right, the whole row has a top and bottom rule, and "All
   categories" floats free at the right with no divider before it.
   With real category counts (often more than the design mockup's 4),
   the row wraps to a second line if it runs out of width — that's
   expected, not a bug.

   Still using !important here: Flatsome's own theme CSS was
   fighting these rules for specificity, so every relevant property
   is forced to a known state rather than just set once. */
.tcex-blog-template .tcex-pills{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  border:none !important;
  border-top:1px solid #ccc !important;
  border-bottom:1px solid #ccc !important;
  padding:0 !important;
  margin:20px 0 !important;
  background:none !important;
  list-style:none !important;
}
.tcex-blog-template .tcex-pill{
  display:flex !important;
  align-items:center !important;
  text-decoration:none !important;
  color:var(--tcex-ink) !important;
  font-weight:700 !important;
  font-size:14px !important;
  padding:16px 24px !important;
  margin:0 !important;
  border:none !important;
  border-right:1px solid var(--tcex-line) !important;
  background:none !important;
  width:auto !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
.tcex-blog-template .tcex-pill span{color:#999 !important;font-weight:400 !important;margin-left:6px !important;}
.tcex-blog-template .tcex-pill.is-active{color:var(--tcex-ink) !important;font-weight:700 !important;background:none !important;}
.tcex-blog-template .tcex-pill.is-active span{color:#999 !important;}
.tcex-blog-template .tcex-pill-link{
  display:flex !important;
  align-items:center !important;
  color:var(--tcex-blue) !important;
  margin-left:auto !important;
  padding:16px 24px !important;
  font-weight:600 !important;
  border:none !important;
  white-space:nowrap !important;
}

/* Featured post — output by [tcex_featured_post] */
.tcex-blog-template .tcex-featured{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;padding:32px 0;}
.tcex-blog-template .tcex-featured-media img{width:100%;height:auto;display:block;}
.tcex-blog-template .tcex-featured-tags{display:flex;gap:10px;align-items:center;margin-bottom:16px;}
.tcex-blog-template .tcex-flag{background:var(--tcex-red);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;}
.tcex-blog-template .tcex-cat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#888;}
.tcex-blog-template .tcex-cat a{color:#888;text-decoration:none;}
.tcex-blog-template .tcex-featured-body h2{font-size:34px;font-weight:800;line-height:1.1;margin:0 0 16px;}
.tcex-blog-template .tcex-featured-body h2 a{color:var(--tcex-ink);text-decoration:none;}
.tcex-blog-template .tcex-featured-body p{color:#444;line-height:1.6;margin-bottom:16px;}
.tcex-blog-template .tcex-byline{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#888;margin-bottom:20px;}
.tcex-blog-template .tcex-btn{display:inline-block;border:1px solid var(--tcex-ink);padding:12px 20px;color:var(--tcex-ink);text-decoration:none;font-weight:600;margin-top:8px;}
.tcex-blog-template .tcex-btn:hover{background:var(--tcex-ink);color:#fff;}

/* Credibility band */
.tcex-blog-template .tcex-credibility{display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:center;border-top:1px solid var(--tcex-line);border-bottom:1px solid var(--tcex-line);padding:32px 0;margin:32px 0;}
.tcex-blog-template .tcex-cred-number{display:flex;flex-direction:column;}
.tcex-blog-template .tcex-cred-year{font-size:56px;font-weight:800;color:var(--tcex-red);line-height:1;}
.tcex-blog-template .tcex-cred-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#888;margin-top:6px;}
.tcex-blog-template .tcex-credibility p{font-size:18px;line-height:1.6;color:#222;margin:0;}

/* Section label */
.tcex-blog-template .tcex-section-label{display:flex;align-items:center;gap:16px;margin:24px 0;}
.tcex-blog-template .tcex-section-label span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;}
.tcex-blog-template .tcex-section-label hr{flex:1;border:none;border-top:1px solid var(--tcex-line);margin:0;}

/* Latest posts grid — output by [tcex_post_grid] */
.tcex-blog-template .tcex-post-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;margin:16px 0;}
.tcex-blog-template .tcex-post-card-media{display:block;margin-bottom:12px;}
.tcex-blog-template .tcex-post-card-media img{width:100%;height:180px;object-fit:cover;display:block;}
.tcex-blog-template .tcex-post-card-media-placeholder{width:100%;height:180px;background:#ddd;}
.tcex-blog-template .tcex-post-card-category{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--tcex-blue);margin-bottom:8px;}
.tcex-blog-template .tcex-post-card-category a{color:var(--tcex-blue);text-decoration:none;}
.tcex-blog-template .tcex-post-card-title{font-size:20px;font-weight:800;line-height:1.2;margin:0 0 8px;}
.tcex-blog-template .tcex-post-card-title a{color:var(--tcex-ink);text-decoration:none;}
.tcex-blog-template .tcex-post-card-excerpt{color:#444;font-size:14px;line-height:1.6;margin:0 0 10px;}
.tcex-blog-template .tcex-post-card-meta{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#888;}

/* Footer row layout */
.tcex-blog-template .tcex-footer-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;padding:32px 0;border-top:1px solid var(--tcex-line);}
.tcex-blog-template .tcex-footer-col h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}

/* Most Read — output by [tcex_most_read] */
.tcex-blog-template .tcex-most-read h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.tcex-blog-template .tcex-most-read ol{list-style:none;counter-reset:tcex-count;margin:0;padding:0;}
.tcex-blog-template .tcex-most-read li{counter-increment:tcex-count;display:flex;gap:12px;margin-bottom:14px;}
.tcex-blog-template .tcex-most-read li::before{content:counter(tcex-count,decimal-leading-zero);color:var(--tcex-red);font-weight:700;flex-shrink:0;}
.tcex-blog-template .tcex-most-read a{color:var(--tcex-ink);text-decoration:none;font-weight:600;}

/* Shop the Gear column */
.tcex-blog-template .tcex-linklist{list-style:none;margin:0;padding:0;}
.tcex-blog-template .tcex-linklist li{border-top:1px solid var(--tcex-line);padding:10px 0;}
.tcex-blog-template .tcex-linklist a{color:var(--tcex-ink);text-decoration:none;font-weight:600;}
.tcex-blog-template .tcex-link{color:var(--tcex-blue);text-decoration:none;font-weight:600;}

/* Newsletter band */
.tcex-blog-template .tcex-newsletter{background:var(--tcex-red);color:#fff;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;margin:32px 0;}
.tcex-blog-template .tcex-kicker{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;}
.tcex-blog-template .tcex-newsletter h2{font-size:36px;font-weight:800;line-height:1.1;margin:8px 0 0;max-width:480px;color:#fff;}
.tcex-blog-template .tcex-newsletter-form{display:flex;flex-direction:column;gap:10px;min-width:300px;}
.tcex-blog-template .tcex-newsletter-form input{padding:14px;border:none;font-size:14px;box-sizing:border-box;}
.tcex-blog-template .tcex-newsletter-form button{background:var(--tcex-ink);color:#fff;border:none;padding:14px;font-weight:700;cursor:pointer;}
.tcex-blog-template .tcex-fineprint{font-size:12px;opacity:.85;margin:0;color:#fff;}

/* Footer addresses */
.tcex-blog-template .tcex-addresses{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:24px 0;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#888;border-top:1px solid var(--tcex-line);}

@media (max-width: 780px){
  .tcex-blog-template .tcex-hero h1{font-size:56px;}
  .tcex-blog-template .tcex-featured{grid-template-columns:1fr;}
  .tcex-blog-template .tcex-credibility{grid-template-columns:1fr;}
  .tcex-blog-template .tcex-post-grid{grid-template-columns:1fr;}
  .tcex-blog-template .tcex-newsletter{padding:32px;}
  .tcex-blog-template .tcex-footer-row{grid-template-columns:1fr;}
}