/* North Cyprus Transfers — guides & articles.
   Loaded AFTER nct.css, on blog pages only. Every token comes from nct.css:
   this file adds components, never a second palette. The old blog.css carried
   its own :root and its own header — two sources of truth for one brand, and
   they had already drifted (dimmer ivory, a different --ivory-faint).

   Every component is prefixed `g-` so nothing collides with the route pages,
   which own .hotel, .poi, .faq and .wrap. Logical properties throughout, so
   Hebrew mirrors without a second sheet. */

/* The home page paints its atmosphere with a WebGL canvas; articles get the
   same warmth from a fixed gradient, which costs nothing. */
body.g-page{
  background-image:
    radial-gradient(900px 620px at 84% -5%, rgba(198,122,62,.14), transparent 60%),
    radial-gradient(700px 500px at 5% 20%, rgba(154,90,40,.08), transparent 60%);
  background-attachment:fixed;
}

.g-wrap{max-width:820px;margin:0 auto;position:relative;z-index:var(--z-body);
  padding-inline:max(26px, env(safe-area-inset-left)) max(26px, env(safe-area-inset-right))}
.g-wrap-wide{max-width:1180px;margin:0 auto;position:relative;z-index:var(--z-body);
  padding-inline:max(26px, env(safe-area-inset-left)) max(26px, env(safe-area-inset-right))}

/* ---------- article shell ---------- */
.g-article{padding:40px 0 20px;font-size:17px;line-height:1.72}
.g-crumbs{font-size:12px;color:var(--ivory-faint);letter-spacing:.02em;margin-bottom:22px}
.g-crumbs a{color:var(--ivory-dim)}
.g-crumbs a:hover{color:var(--ivory)}
.g-eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper-soft);margin-bottom:16px}
html[lang="he"] .g-eyebrow{letter-spacing:0}

.g-article h1{font-size:clamp(34px,5vw,54px);font-weight:700;line-height:1.08;
  letter-spacing:-.015em;margin-bottom:20px}
html[lang="he"] .g-article h1{letter-spacing:0}
.g-article h2{font-size:clamp(25px,3.4vw,33px);font-weight:700;line-height:1.16;margin:46px 0 16px}
.g-article h3{font-size:21px;font-weight:700;line-height:1.25;margin:30px 0 12px;color:var(--copper-bright)}
.g-article p{margin:0 0 20px;color:rgba(243,238,226,.86)}
.g-article ul,.g-article ol{margin:0 0 20px;padding-inline-start:22px;color:rgba(243,238,226,.86)}
.g-article li{margin:0 0 8px}
.g-article li::marker{color:var(--copper-soft)}
.g-article strong{color:var(--ivory);font-weight:600}
/* Body links earn an underline; component links (cards, CTAs) style themselves. */
.g-article p > a,.g-article li > a{color:var(--copper-soft);border-bottom:1px solid var(--line-copper)}
.g-article p > a:hover,.g-article li > a:hover{color:var(--copper-bright)}

.g-byline{display:flex;align-items:center;gap:12px;padding:16px 0;
  border-block:1px solid var(--line);margin-bottom:28px;font-size:13px;color:var(--ivory-dim)}
.g-byline .g-ava{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--copper),var(--copper-deep));
  font-family:var(--serif);font-weight:700;color:#0B0D11;font-size:15px}
.g-byline b{color:var(--ivory)}
.g-byline .dot{color:var(--ivory-faint)}

/* ---------- language bar ---------- */
.g-langbar{display:flex;gap:6px;align-items:center;margin:0 0 22px;flex-wrap:wrap}
.g-langbar .lbl{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ivory-faint);margin-inline-end:4px}
html[lang="he"] .g-langbar .lbl{letter-spacing:0}
/* 44px: anything smaller is below the comfortable thumb target on a phone */
.g-langbar a{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  padding:6px 13px;min-height:44px;border-radius:99px;border:1px solid var(--line);
  color:var(--ivory-dim);background:rgba(243,238,226,.02)}
.g-langbar a:hover{color:var(--ivory);border-color:var(--line-copper)}
.g-langbar a.on{background:var(--copper);color:#160D06;border-color:transparent}
.g-langbar svg{width:16px;height:16px;border-radius:50%;flex:none;display:block}

/* ---------- answer-first box (the thing AI assistants quote) ---------- */
.g-answer{position:relative;overflow:hidden;margin:0 0 30px;padding:22px 24px;
  border:1px solid var(--line-copper);border-radius:16px;
  background:linear-gradient(180deg,rgba(26,33,48,.7),rgba(16,20,28,.7))}
.g-answer::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;
  background:linear-gradient(180deg,var(--copper-bright),var(--copper))}
.g-answer .lbl{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:8px}
html[lang="he"] .g-answer .lbl{letter-spacing:0}
.g-answer p{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ivory);margin:0}
.g-answer p strong{color:var(--copper-bright)}

/* ---------- table of contents ---------- */
.g-toc{border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:0 0 34px;
  background:rgba(20,25,36,.4)}
.g-toc .lbl{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:10px}
html[lang="he"] .g-toc .lbl{letter-spacing:0}
.g-toc ol{margin:0;padding-inline-start:20px;color:var(--ivory-dim);font-size:14px}
.g-toc li{margin:0 0 6px}
.g-toc a{color:var(--ivory-dim)}
.g-toc a:hover{color:var(--copper-soft)}

/* ---------- media ---------- */
.g-hero{border-radius:18px;overflow:hidden;border:1px solid var(--line-copper);margin:0 0 32px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8);position:relative;background:var(--bg)}
.g-hero img{display:block;width:100%;height:clamp(230px,38vw,440px);object-fit:cover}
.g-hero figcaption{position:absolute;inset-inline:0;bottom:0;font-size:12px;color:var(--ivory-dim);
  padding:10px 16px;background:linear-gradient(0deg,rgba(11,13,17,.85),transparent)}
.g-hero figcaption b{color:var(--copper-soft);font-weight:600}

.g-figure{border-radius:16px;overflow:hidden;border:1px solid var(--line-copper);margin:0 0 28px;
  box-shadow:0 20px 50px -26px rgba(0,0,0,.8)}
.g-figure img{width:100%;display:block;height:auto}
.g-figure figcaption{font-size:11.5px;color:var(--ivory-faint);padding:9px 14px;background:rgba(11,13,17,.5)}
.g-figure figcaption b{color:var(--copper-soft)}
/* Geography never mirrors — but an <img> cannot mirror anyway, and setting
   direction:ltr on the figure dragged the figcaption with it, so a Hebrew
   caption began at the left edge and read backwards. The rule belongs on the
   image, where it is a no-op, not on the text underneath it. */
.g-figure--map img{direction:ltr}
/* Small source images stay at their own size rather than being upscaled to 820px. */
.g-figure--narrow{max-width:420px;margin-inline:auto}

/* ---------- quick facts ---------- */
.g-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 32px}
.g-facts .gf{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--bg-2)}
.g-facts .gf .n{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--copper-bright);line-height:1.05}
.g-facts .gf .d{font-size:11.5px;color:var(--ivory-dim);margin-top:5px}

.g-keyfig{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0 30px}
.g-keyfig .k{flex:1;min-width:150px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--bg-2)}
.g-keyfig .k .n{font-family:var(--serif);font-size:29px;font-weight:700;color:var(--copper-bright);line-height:1}
.g-keyfig .k .d{font-size:12.5px;color:var(--ivory-dim);margin-top:6px}

/* ---------- prose furniture ---------- */
.g-note{border-inline-start:3px solid var(--copper);padding:6px 0;padding-inline-start:16px;
  margin:0 0 26px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ivory)}
html[lang="he"] .g-note{font-style:normal}

/* A wide table must scroll inside its own box, never widen the page. */
.g-tbl{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch}
.g-tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px}
.g-tbl th,.g-tbl td{padding:12px 16px;text-align:start;border-bottom:1px solid var(--line)}
.g-tbl thead th{background:rgba(198,122,62,.1);color:var(--copper-bright);font-weight:600;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase}
html[lang="he"] .g-tbl thead th{letter-spacing:0}
.g-tbl tbody tr:last-child td{border-bottom:0}
.g-tbl td:first-child{color:var(--ivory);font-weight:500}

.g-srcnote{font-size:12px;color:var(--ivory-faint);margin:0 0 28px;line-height:1.6}
.g-srcnote a{color:var(--ivory-dim);border-bottom:1px solid var(--line)}

/* ---------- area / neighbourhood cards ---------- */
.g-areas{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 26px}
.g-area{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:15px;
  padding:20px 22px;background:rgba(20,25,36,.4)}
.g-area::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,var(--copper),transparent)}
.g-area .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.g-area h3{font-size:20px;font-weight:700;color:var(--ivory);margin:0}
.g-area .mins{font-size:11px;font-weight:600;color:var(--copper-soft);white-space:nowrap}
.g-area p{font-size:13.5px;color:var(--ivory-dim);margin:0;line-height:1.55}

/* ---------- hotel cards ---------- */
.g-hotels{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:8px 0 14px}
.g-hotel{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:15px;padding:20px 22px;
  background:linear-gradient(180deg,rgba(26,33,48,.5),rgba(16,20,28,.5))}
.g-hotel .thumb{display:block;width:calc(100% + 44px);height:150px;object-fit:cover;
  margin:-20px -22px 16px;border-bottom:1px solid var(--line-copper)}
.g-hotel .htag{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:8px}
html[lang="he"] .g-hotel .htag{letter-spacing:0}
.g-hotel h3{font-size:21px;font-weight:700;color:var(--ivory);margin:0 0 7px}
.g-hotel p{font-size:13px;color:var(--ivory-dim);margin:0 0 14px;flex:1;line-height:1.55}
/* A card's call to action is a tap target, not a word in a sentence: 44px. */
.g-hotel .tlink{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--copper-soft);
  border-bottom:1px solid var(--line-copper);min-height:44px;display:inline-flex;align-items:center}
.g-hotel .tlink:hover{color:var(--copper-bright)}

/* ---------- points of interest ---------- */
.g-poi{border:1px solid var(--line);border-inline-start:3px solid var(--copper);
  border-start-start-radius:0;border-start-end-radius:12px;border-end-end-radius:12px;border-end-start-radius:0;
  padding:16px 20px;margin:0 0 12px;background:rgba(20,25,36,.32)}
.g-poi h3{font-size:20px;font-weight:700;color:var(--copper-bright);margin:0 0 5px}
.g-poi p{font-size:14.5px;color:var(--ivory-dim);margin:0;line-height:1.6}

/* ---------- embedded transfer route box ---------- */
.g-routebox{margin:42px 0;border:1px solid var(--line-copper);border-radius:20px;padding:30px 30px 26px;
  background:radial-gradient(680px 320px at 82% -30%,rgba(198,122,62,.2),transparent 60%),
             linear-gradient(180deg,rgba(26,33,48,.72),rgba(16,20,28,.82))}
.g-routebox .rb-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:12px}
html[lang="he"] .g-routebox .rb-eyebrow{letter-spacing:0}
.g-routebox h2{font-size:clamp(24px,3vw,30px);font-weight:700;margin:0 0 8px}
.g-routebox .rb-lead{font-size:14.5px;color:var(--ivory-dim);margin:0 0 22px;max-width:52ch}
.g-routebox .rb-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 0;
  border-block:1px solid var(--line);margin-bottom:20px}
.g-routebox .rb-pt{display:flex;flex-direction:column;line-height:1.2}
.g-routebox .rb-pt b{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ivory)}
.g-routebox .rb-pt span{font-size:11px;color:var(--ivory-faint)}
.g-routebox .rb-arrow{flex:1;min-width:44px;height:2px;opacity:.8;
  background:repeating-linear-gradient(90deg,var(--copper-soft) 0 7px,transparent 7px 14px)}
.g-routebox .rb-meta{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.g-routebox .rb-price{display:flex;align-items:baseline;gap:8px}
.g-routebox .rb-price .amt{font-family:var(--serif);font-size:33px;font-weight:700;color:var(--copper-bright);line-height:1}
.g-routebox .rb-price .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory-dim)}
html[lang="he"] .g-routebox .rb-price .lbl{letter-spacing:0}
.g-routebox .rb-note{font-size:12.5px;color:var(--ivory-dim);max-width:34ch}
.g-routebox .rb-note b{color:var(--ivory)}
.g-routebox .rb-cta{margin-inline-start:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- partner block (Dev/Soy) ----------
   A referral, not a claim: no counts, no years, no ratings. The mark earns its
   place because a named partner with a face is more honest than a bare link. */
.g-partner{position:relative;overflow:hidden;margin:44px 0;padding:28px 30px;
  display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
  border:1px solid var(--line-copper);border-radius:20px;
  background:radial-gradient(560px 260px at 92% -40%,rgba(198,122,62,.16),transparent 62%),
             linear-gradient(180deg,rgba(26,33,48,.62),rgba(16,20,28,.72))}
/* the hairline that says "this is an aside, not the article" */
.g-partner::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:2px;
  background:linear-gradient(180deg,var(--copper-bright),var(--copper) 40%,transparent)}

.g-partner .p-mark{flex:none;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:rgba(11,13,17,.55);border:1px solid var(--line-copper);
  box-shadow:0 0 0 5px rgba(198,122,62,.06), 0 14px 34px -16px rgba(0,0,0,.9)}
.g-partner .p-mark img{width:82px;height:82px;border-radius:50%;display:block}

.g-partner .p-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:10px}
html[lang="he"] .g-partner .p-eyebrow{letter-spacing:0}
.g-partner h3{font-family:var(--serif);font-size:24px;font-weight:700;color:var(--ivory);margin:0 0 8px;line-height:1.2}
.g-partner p{font-size:14.5px;color:var(--ivory-dim);margin:0 0 18px;max-width:56ch;line-height:1.65}
.g-partner p strong{color:var(--ivory)}
.g-partner .p-cta{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- FAQ ---------- */
.g-faq{margin:46px 0 0}
.g-faq > h2{margin-bottom:18px}
.g-faq-item{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:12px;
  background:rgba(20,25,36,.4)}
.g-faq-item h3{font-family:var(--serif);font-size:20px;color:var(--ivory);margin:0 0 8px}
.g-faq-item p{font-size:15px;color:var(--ivory-dim);margin:0}
.g-faq-item p strong{color:var(--copper-soft)}
.g-faq-item a{color:var(--copper-soft);border-bottom:1px solid var(--line-copper)}

/* ---------- sources ---------- */
.g-sources{margin:40px 0 0;border-top:1px solid var(--line);padding-top:24px}
.g-sources h2{font-size:20px;margin:0 0 12px}
.g-sources ol{margin:0;padding-inline-start:20px;font-size:12.5px;color:var(--ivory-faint);line-height:1.7}
.g-sources a{color:var(--ivory-dim);border-bottom:1px solid var(--line);word-break:break-word}
.g-sources a:hover{color:var(--copper-soft)}

/* ---------- closing CTA ---------- */
.g-cta{margin:46px 0;border:1px solid var(--line-copper);border-radius:20px;padding:34px 32px;text-align:center;
  background:radial-gradient(600px 300px at 50% -20%,rgba(198,122,62,.18),transparent 60%),
             linear-gradient(180deg,rgba(26,33,48,.7),rgba(16,20,28,.8))}
.g-cta h2{font-size:30px;font-weight:700;margin:0 0 10px}
.g-cta p{color:var(--ivory-dim);max-width:48ch;margin:0 auto 22px;font-size:15px}
.g-cta .btn{margin:0 5px}

/* ---------- related ---------- */
.g-related{margin:40px 0;border-top:1px solid var(--line);padding-top:30px}
.g-related h2{font-size:24px;margin-bottom:18px}
.g-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-related .card{display:block;border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  background:rgba(20,25,36,.4);transition:transform .25s,border-color .25s}
.g-related .card:hover{transform:translateY(-3px);border-color:var(--line-copper)}
.g-related .card .tag{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--copper-soft);margin-bottom:7px}
html[lang="he"] .g-related .card .tag{letter-spacing:0}
.g-related .card .ttl{display:block;font-family:var(--serif);font-size:19px;font-weight:700;
  color:var(--ivory);line-height:1.25}

/* ---------- hub ---------- */
.g-hub-hero{padding:56px 0 24px;text-align:center}
.g-hub-hero h1{font-size:clamp(38px,6vw,62px);font-weight:700;letter-spacing:-.02em;line-height:1.06}
html[lang="he"] .g-hub-hero h1{letter-spacing:0}
.g-hub-hero p{color:var(--ivory-dim);max-width:56ch;margin:16px auto 0;font-size:16px;line-height:1.65}
.g-hub-langbar{justify-content:center;margin-top:24px}
.g-pillar{margin:48px 0}
.g-pillar h2{font-size:26px;font-weight:700;margin-bottom:6px}
.g-pillar .sub{font-size:13.5px;color:var(--ivory-faint);margin-bottom:20px}
.g-postgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g-post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:rgba(20,25,36,.4);transition:transform .25s,border-color .25s}
.g-post:hover{transform:translateY(-4px);border-color:var(--line-copper)}
.g-post .thumb{height:150px;position:relative;background-size:cover;background-position:center}
.g-post .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(11,13,17,.6))}
.g-post .body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
.g-post .tag{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:8px}
html[lang="he"] .g-post .tag{letter-spacing:0}
.g-post .ttl{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ivory);
  line-height:1.22;margin-bottom:8px}
.g-post .ex{font-size:13px;color:var(--ivory-dim);flex:1;line-height:1.55}
.g-post .meta{font-size:11.5px;color:var(--ivory-faint);margin-top:14px}

/* ---------- responsive ----------
   Verified with body{overflow-x} switched OFF: the seatbelt hides overflow,
   it does not prevent it. */
@media(max-width:900px){
  .g-postgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .g-areas,.g-hotels{grid-template-columns:1fr}
  .g-related-grid{grid-template-columns:1fr}
  .g-facts{grid-template-columns:1fr 1fr}
  .g-routebox{padding:24px 22px 22px}
  .g-routebox .rb-cta{margin-inline-start:0;width:100%}
  .g-routebox .rb-cta .btn{flex:1;justify-content:center}
}
@media(max-width:640px){
  /* the mark stops being a column and becomes a crest above the copy */
  .g-partner{grid-template-columns:1fr;gap:18px;padding:24px 22px}
  .g-partner .p-mark{width:76px;height:76px}
  .g-partner .p-mark img{width:64px;height:64px}
}
@media(max-width:560px){
  .g-postgrid{grid-template-columns:1fr}
  .g-article{font-size:16px}
  .g-answer p{font-size:19px}
  .g-cta{padding:28px 20px}
  .g-cta .btn{margin:0 0 10px;width:100%;justify-content:center}
  .g-partner .p-cta .btn{width:100%;justify-content:center}
  .g-hotel .thumb{width:calc(100% + 44px)}
}
@media(prefers-reduced-motion:reduce){
  .g-post,.g-related .card{transition:none}
}