/* Thraya Blog v2
   Every component rule is written as `.tb .tb-x` so it outranks any single class
   rule from Elementor or the theme. Nothing here can leak off this page. */

.tb{
  --tb-gd:#265449; --tb-g:#315D54; --tb-gs:#4F7168;
  --tb-t:#CF7461;  --tb-td:#A85440;
  --tb-cr:#FBF7F1; --tb-cw:#F5EDE3; --tb-card:#FFFFFF;
  --tb-ln:#E3D9CB; --tb-ink:#2A3B36; --tb-is:#55655F;
  --tb-disp:"Brittanian","Caveat Brush","Permanent Marker",cursive;
  --tb-bd:"Inter",system-ui,-apple-system,sans-serif;
  background:var(--tb-cr);
  color:var(--tb-ink);
  font-family:var(--tb-bd);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden: hidden would break the sticky filter bar */
  overflow-x:clip;
}
.tb *{box-sizing:border-box;}
.tb img{display:block;max-width:100%;height:auto;}
.tb a{color:inherit;text-decoration:none;}
.tb h1,.tb h2,.tb h3,.tb h4{margin:0;text-wrap:balance;}
.tb p{margin:0;}
.tb :focus-visible{outline:2px solid var(--tb-t);outline-offset:3px;border-radius:4px;}

/* full-bleed helper for the coloured bands */
.tb-full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);}
.tb .tb-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}

/* paper grain, sits under content on the cream bands */
.tb .tb-grain{position:relative;}
.tb .tb-grain::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle at 1px 1px,rgba(120,100,70,.055) 1px,transparent 0);
  background-size:14px 14px;
}
.tb .tb-grain>*{position:relative;z-index:1;}

/* ---------- masthead ---------- */
.tb .tb-mast{background:var(--tb-cw);padding:52px 0 46px;position:relative;overflow:hidden;}
.tb .tb-mast .tb-wrap{position:relative;z-index:2;}
.tb .tb-mi{max-width:660px;}
.tb .tb-kick{
  display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tb-td);margin-bottom:16px;
}
.tb .tb-kick svg{width:15px;height:15px;}
.tb .tb-mast h1{
  font-family:var(--tb-disp);font-style:italic;font-weight:400;
  font-size:clamp(44px,6.2vw,76px);line-height:.98;color:var(--tb-gd);margin:0 0 18px;
  -webkit-text-stroke:.24px currentColor;paint-order:stroke fill;
}
.tb .tb-mast p{font-size:18px;line-height:1.65;color:var(--tb-is);max-width:52ch;}
.tb .tb-ink{margin-top:24px;width:150px;height:13px;color:var(--tb-t);opacity:.85;}
.tb .tb-leaf{
  position:absolute;right:-24px;bottom:-58px;width:288px;
  color:var(--tb-gs);opacity:.12;z-index:1;
}

/* ---------- section heads ---------- */
.tb .tb-sh{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:10px;
}
.tb .tb-sh h2{
  font-family:var(--tb-disp);font-style:italic;font-weight:400;
  font-size:clamp(30px,3.4vw,44px);color:var(--tb-gd);line-height:1;
  display:flex;align-items:center;gap:14px;
  -webkit-text-stroke:.24px currentColor;paint-order:stroke fill;
}
.tb .tb-sh h2 .tb-mo{width:34px;height:34px;color:var(--tb-t);opacity:.85;flex:none;}
.tb .tb-ct{
  font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tb-is);padding-bottom:6px;white-space:nowrap;
}
.tb .tb-shrule{width:100%;height:11px;color:var(--tb-ln);margin-bottom:30px;display:block;}

/* ---------- featured band: green, lit rather than flat ---------- */
.tb .tb-hero{
  position:relative;overflow:hidden;padding:62px 0 66px;color:var(--tb-cr);
  background:
    radial-gradient(105% 80% at 78% 118%, rgba(207,116,97,.20) 0%, rgba(207,116,97,0) 62%),
    radial-gradient(120% 95% at 16% 6%, #2F6355 0%, #29594E 42%, #245045 70%, #1F4840 100%);
}
/* settles the band into the page instead of stopping abruptly */
.tb .tb-hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(31,72,64,0),rgba(31,72,64,.35));
}
.tb .tb-hero .tb-wrap{position:relative;z-index:2;}
.tb .tb-hleaf{position:absolute;left:-60px;top:-70px;width:280px;color:#fff;opacity:.055;z-index:1;}
.tb .tb-hleaf2{
  position:absolute;right:-90px;bottom:-120px;width:340px;color:var(--tb-t);opacity:.10;z-index:1;
}
.tb .tb-hgrid{display:grid;grid-template-columns:1.12fr 1fr;gap:48px;align-items:center;}
.tb .tb-hph{
  aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:#1E453C;
  box-shadow:0 22px 50px rgba(0,0,0,.28),0 0 0 1px rgba(251,247,241,.09);
}
.tb .tb-hph img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  transition:transform .6s ease;
}
.tb .tb-hgrid:hover .tb-hph img{transform:scale(1.035);}
.tb .tb-chip{
  display:inline-block;background:linear-gradient(180deg,#D9836F,#C4664F);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;box-shadow:0 6px 16px rgba(0,0,0,.22);
}
.tb .tb-hero h3{
  font-size:clamp(25px,2.5vw,35px);line-height:1.18;font-weight:600;color:#FBF7F1;margin:0 0 15px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tb .tb-hex{
  font-size:15px;line-height:1.68;color:#C3D5D0;margin:0 0 20px;max-width:46ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.tb .tb-hmeta{
  font-size:12.5px;color:#A2BAB3;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;margin-bottom:20px;
}
.tb .tb-dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6;}
.tb .tb-rd{
  display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#F0B4A2;
}
.tb .tb-rd svg{width:16px;height:16px;transition:transform .2s;}
.tb .tb-hgrid:hover .tb-rd svg{transform:translateX(5px);}

/* a drawn rule instead of a label between the hero and the three below */
.tb .tb-hdiv{display:block;width:100%;height:12px;color:var(--tb-t);opacity:.5;margin:46px 0 26px;}

/* the three cards sit on green, so they set their own colours explicitly */
.tb .tb-sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.tb .tb-sgrid .tb-c{
  color:var(--tb-ink);
  background:linear-gradient(180deg,#FFFFFF 0%,#FCF9F4 100%);
  border-color:rgba(251,247,241,.16);
}
.tb .tb-sgrid .tb-c h3{color:var(--tb-gd);}
.tb .tb-sgrid .tb-c p,
.tb .tb-sgrid .tb-c .tb-by{color:var(--tb-is);}
.tb .tb-sgrid .tb-c:hover{
  border-color:rgba(251,247,241,.42);box-shadow:0 18px 36px rgba(0,0,0,.26);
}

/* ---------- card component ---------- */
.tb .tb-c{
  background:var(--tb-card);border:1px solid var(--tb-ln);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .22s,border-color .22s,box-shadow .22s;
}
.tb .tb-c:hover{
  transform:translateY(-3px);border-color:var(--tb-gs);box-shadow:0 12px 28px rgba(38,84,73,.10);
}
.tb .tb-ph{aspect-ratio:3/2;overflow:hidden;background:var(--tb-cw);position:relative;}
/* hairline along the bottom of every photo, so white-background shots
   do not dissolve into the white card */
.tb .tb-ph::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 -1px 0 rgba(42,59,54,.10);
}
.tb .tb-ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 40%;
  transition:transform .5s ease;
}
.tb .tb-c:hover .tb-ph img{transform:scale(1.045);}
.tb .tb-cb{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.tb .tb-eb{
  align-self:flex-start;background:#F2E6DF;color:var(--tb-td);font-size:10px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  margin-bottom:11px;
}
.tb .tb-c h3{font-size:16.5px;line-height:1.35;font-weight:600;margin:0 0 10px;}
.tb .tb-c h3 span{
  background-image:linear-gradient(var(--tb-t),var(--tb-t));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s ease;
}
.tb .tb-c:hover h3 span{background-size:100% 1.5px;}
.tb .tb-c p{font-size:13.5px;line-height:1.6;color:var(--tb-is);margin:0 0 16px;}
.tb .tb-by{
  margin-top:auto;display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--tb-is);
}
.tb .tb-by img{
  width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid var(--tb-ln);
}
.tb .tb-readmark{
  margin-top:auto;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tb-td);display:inline-flex;align-items:center;gap:8px;
}
.tb .tb-readmark svg{width:14px;height:14px;transition:transform .2s;}
.tb .tb-c:hover .tb-readmark svg{transform:translateX(4px);}

/* ---------- filters ---------- */
.tb .tb-fb{
  position:sticky;top:84px;z-index:30;background:rgba(251,247,241,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--tb-ln);margin-top:52px;
}
.tb .tb-fl{display:flex;gap:9px;padding:15px 0;overflow-x:auto;scrollbar-width:none;}
.tb .tb-fl::-webkit-scrollbar{display:none;}
.tb .tb-pill{
  border:1px solid var(--tb-ln);background:transparent;color:var(--tb-is);
  font-family:var(--tb-bd);font-size:13px;font-weight:500;padding:9px 17px;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:.16s;display:inline-flex;align-items:center;gap:8px;
}
.tb .tb-pill:hover{border-color:var(--tb-gs);color:var(--tb-gd);}
.tb .tb-pill[aria-pressed="true"]{
  background:var(--tb-gd);border-color:var(--tb-gd);color:var(--tb-cr);
}
.tb .tb-pill .tb-n{opacity:.55;font-variant-numeric:tabular-nums;}

/* ---------- archive ---------- */
.tb .tb-arch{padding:46px 0 70px;}
.tb .tb-g{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;}
.tb .tb-c.tb-hide{display:none;}
.tb .tb-mw{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:42px;}
.tb .tb-more{
  background:transparent;border:1px solid var(--tb-gd);color:var(--tb-gd);
  font-family:var(--tb-bd);font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:14px 34px;border-radius:999px;cursor:pointer;transition:.18s;
}
.tb .tb-more:hover{background:var(--tb-gd);color:var(--tb-cr);}
.tb .tb-pg{font-size:12px;color:var(--tb-is);}
.tb .tb-empty{padding:56px 0;text-align:center;color:var(--tb-is);display:none;}

/* ---------- guides ---------- */
.tb .tb-gd{background:var(--tb-gd);color:var(--tb-cr);padding:72px 0 78px;}
.tb .tb-gh{max-width:640px;margin:0 0 40px;}
.tb .tb-gd .tb-kick{color:#EDB0A0;}
.tb .tb-gd h2{
  font-family:var(--tb-disp);font-style:italic;font-weight:400;
  font-size:clamp(34px,4.3vw,54px);line-height:1;margin:0 0 16px;color:var(--tb-cw);
  -webkit-text-stroke:.24px currentColor;paint-order:stroke fill;
}
.tb .tb-gl{font-size:16.5px;line-height:1.65;color:#C2D4CF;max-width:50ch;}
.tb .tb-gd .tb-ink{color:var(--tb-t);opacity:.95;}
.tb .tb-gp{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
.tb .tb-pn{background:var(--tb-cr);color:var(--tb-ink);border-radius:20px;padding:28px 28px 22px;}
.tb .tb-pnh{
  display:flex;align-items:center;gap:15px;padding-bottom:16px;margin-bottom:8px;position:relative;
}
.tb .tb-pnh::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--tb-ln);
}
.tb .tb-pni{
  flex:none;width:46px;height:46px;border-radius:13px;background:#F4E3DD;color:var(--tb-td);
  display:flex;align-items:center;justify-content:center;
}
.tb .tb-pni svg{width:22px;height:22px;}
.tb .tb-pnh h3{
  font-family:var(--tb-disp);font-style:italic;font-weight:400;font-size:27px;line-height:1.05;
  margin:0 0 3px;color:var(--tb-gd);
  -webkit-text-stroke:.24px currentColor;paint-order:stroke fill;
}
.tb .tb-pnh .tb-c2{
  font-size:10.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tb-td);
}
.tb .tb-qr{
  display:flex;align-items:flex-start;gap:13px;padding:13px 12px;margin:0 -12px;
  border-radius:11px;transition:background .18s;
}
.tb .tb-qr:hover{background:var(--tb-cw);}
.tb .tb-bul{
  flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px;
  box-shadow:inset 0 0 0 1.6px var(--tb-t);transition:background .18s,box-shadow .18s;
}
.tb .tb-qr:hover .tb-bul{background:var(--tb-t);box-shadow:inset 0 0 0 1.6px var(--tb-td);}
.tb .tb-qt{flex:1;font-size:15px;line-height:1.45;font-weight:500;color:var(--tb-gd);}
.tb .tb-ar{
  flex:none;margin-top:3px;color:var(--tb-t);opacity:0;transform:translateX(-7px);
  transition:opacity .18s,transform .18s;
}
.tb .tb-ar svg{width:17px;height:17px;display:block;}
.tb .tb-qr:hover .tb-ar{opacity:1;transform:translateX(0);}

/* ---------- closing call to action ---------- */
.tb .tb-cta{background:var(--tb-cr);padding:74px 0;text-align:center;position:relative;overflow:hidden;}
.tb .tb-cta h2{
  font-family:var(--tb-disp);font-style:italic;font-weight:400;
  font-size:clamp(32px,4.2vw,50px);color:var(--tb-gd);margin:0 0 16px;
  -webkit-text-stroke:.24px currentColor;paint-order:stroke fill;
}
.tb .tb-cta p{color:var(--tb-is);margin:0 auto 28px;max-width:48ch;font-size:16.5px;}
.tb .tb-bt{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;}
.tb .tb-bt a{font-size:14px;font-weight:600;padding:15px 32px;border-radius:999px;transition:.18s;}
.tb .tb-b1{background:var(--tb-t);color:#fff;}
.tb .tb-b1:hover{background:var(--tb-td);}
.tb .tb-b2{color:var(--tb-gd);box-shadow:inset 0 0 0 1px var(--tb-gd);}
.tb .tb-b2:hover{background:var(--tb-gd);color:var(--tb-cr);}
.tb .tb-cl{font-size:14.5px;color:var(--tb-is);}
.tb .tb-cl a{color:var(--tb-gd);font-weight:600;}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .tb .tb-hgrid{grid-template-columns:1fr;gap:28px;}
  .tb .tb-g{grid-template-columns:repeat(2,1fr);}
  .tb .tb-sgrid{grid-template-columns:repeat(3,1fr);gap:16px;}
  .tb .tb-gp{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .tb .tb-wrap{padding:0 18px;}
  /* featured strip becomes a swipeable shelf. padding-inline matches the page
     gutter exactly, so the first card lines up with the hero above it */
  .tb .tb-hdiv{margin:34px 0 20px;}
  .tb .tb-sgrid{
    display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin:0 -18px;padding:2px 18px 10px;scroll-padding-inline:18px;
  }
  .tb .tb-sgrid::-webkit-scrollbar{display:none;}
  .tb .tb-sgrid .tb-c{flex:0 0 80%;scroll-snap-align:start;}
  .tb .tb-sgrid .tb-c:hover{transform:none;}
  .tb .tb-g{grid-template-columns:1fr;}
  .tb .tb-mast{padding:40px 0 36px;}
  .tb .tb-hero{padding:36px 0 42px;}
  .tb .tb-fb{top:70px;}
  .tb .tb-pn{padding:24px 22px 20px;}
}
@media (prefers-reduced-motion:reduce){
  .tb *{transition:none !important;animation:none !important;}
}

/* ---------------------------------------------------------------------------
   Host container reset.
   The Elementor container holding [thraya_blog] ships with padding and a
   negative right margin, which shows as a pale strip under the header, a white
   band above the footer, and a sliver off the right edge. This zeroes it
   without touching any other container on the site.
   --------------------------------------------------------------------------- */
.elementor .e-con:has(.tb),
.elementor .e-con-inner:has(.tb),
.elementor .elementor-widget-shortcode:has(.tb),
.elementor .elementor-widget-container:has(.tb),
.elementor .elementor-shortcode:has(.tb){
  padding:0 !important;
  margin:0 !important;
  max-width:none !important;
  gap:0 !important;
}
