/* ==========================================================================
   EGIPTEXCURSII.COM — DESIGN SYSTEM v1.0
   Single stylesheet. Load on every page, before any page-specific CSS.
   Font: Archivo Variable only (wdth 62–125, wght 100–900).
   Load the Archivo font in the page head: fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&display=swap
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand */
  --ink:#08303B;          /* text, dark surfaces */
  --ink-soft:#4A6B72;     /* secondary text */
  --sea:#00B39B;          /* primary brand / WhatsApp actions */
  --sea-deep:#04707A;     /* links, eyebrows, hover on sea */
  --sun:#FFC53D;          /* highlights, badges, active states */
  --hibiscus:#FF5A5F;     /* primary CTA only */
  --hibiscus-d:#E8464B;   /* CTA hover */

  /* Surfaces */
  --sand:#FFF7EC;         /* page background */
  --sand-2:#FDEEDC;       /* alternating section band */
  --paper:#FFFFFF;        /* cards, inputs */
  --line:rgba(8,48,59,.12);
  --line-soft:rgba(8,48,59,.07);

  /* Status */
  --ok-bg:#DFF5EF;  --ok-fg:#04707A;
  --warm-bg:#FFE7B8; --warm-fg:#8A5B00;
  --hot-bg:#FFDCD9; --hot-fg:#B03A3E;

  /* Type */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Shape */
  --r-card:20px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;

  /* Rhythm */
  --pad-section:40px;
  --gap:clamp(16px,2.2vw,28px);
  --maxw:1180px;
  --maxw-prose:72ch;

  /* Elevation */
  --shadow-s:0 2px 8px rgba(8,48,59,.06);
  --shadow-m:0 14px 34px -18px rgba(8,48,59,.35);
  --shadow-l:0 30px 60px -30px rgba(8,48,59,.45);

  /* Media heights — never use aspect-ratio, it is unreliable in some webviews */
  --img-card:clamp(210px,23vw,235px);
  --img-wide:clamp(280px,40vw,520px);
  --img-hero:clamp(300px,44vw,530px);
  --img-thumb:clamp(195px,22vw,215px);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);color:var(--ink);
  font-family:var(--font);font-variation-settings:"wdth" 100,"wght" 420;
  font-size:1.0625rem;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--sea-deep);outline-offset:3px;border-radius:6px}
::selection{background:var(--sun);color:var(--ink)}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   One family, four roles. Width axis carries the personality, not a 2nd font.
   -------------------------------------------------------------------------- */
.eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-variation-settings:"wdth" 82,"wght" 700;color:var(--sea-deep);margin:0 0 14px}
.display{font-size:clamp(2.5rem,6.4vw,4.8rem);line-height:.96;letter-spacing:-.035em;
  font-variation-settings:"wdth" 112,"wght" 800;margin:0}
.h1{font-size:clamp(2.1rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.032em;
  font-variation-settings:"wdth" 110,"wght" 800;margin:0 0 14px}
.h2{font-size:clamp(1.85rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.03em;
  font-variation-settings:"wdth" 108,"wght" 780;margin:0 0 12px}
.h3{font-size:1.2rem;line-height:1.24;letter-spacing:-.015em;
  font-variation-settings:"wdth" 104,"wght" 720;margin:0}
.h4{font-size:1rem;line-height:1.3;letter-spacing:-.01em;
  font-variation-settings:"wdth" 102,"wght" 700;margin:0}
.lede{font-size:clamp(1.02rem,1.5vw,1.18rem);color:var(--ink-soft);max-width:58ch;margin:0}
.meta{font-size:.82rem;font-variation-settings:"wdth" 92,"wght" 560;color:var(--ink-soft)}
.tag{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  font-variation-settings:"wdth" 85,"wght" 700}

/* Long-form article body — wrap blog/tour description content in .prose */
.prose{max-width:var(--maxw-prose)}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.025em;
  font-variation-settings:"wdth" 106,"wght" 760;margin:2.2em 0 .5em}
.prose h3{font-size:1.22rem;letter-spacing:-.015em;
  font-variation-settings:"wdth" 104,"wght" 720;margin:1.8em 0 .4em}
.prose p{margin:0 0 1.1em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose a{color:var(--sea-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--sun)}
.prose a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.prose img{border-radius:var(--r-card);margin:1.6em 0}
.prose blockquote{margin:1.6em 0;padding:2px 0 2px 20px;border-left:4px solid var(--sea);
  font-size:1.1rem;font-variation-settings:"wdth" 104,"wght" 620}
.prose strong{font-variation-settings:"wdth" 100,"wght" 720}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)}
.section{padding-block:var(--pad-section)}
.section--band{background:var(--sand-2)}
.section--dark{background:var(--ink);color:var(--sand)}
.section--dark .eyebrow{color:var(--sun)}
.section--dark .lede,.section--dark .meta{color:rgba(255,247,236,.72)}
.section__head{max-width:80ch;margin-bottom:26px}
.section__head--row{max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end;
  justify-content:space-between;gap:20px}

.grid{display:grid;gap:var(--gap)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
/* Content + sidebar, used on tour and article pages */
.split{display:grid;grid-template-columns:1fr 360px;gap:clamp(28px,4vw,52px);align-items:start}

/* --------------------------------------------------------------------------
   5. BUTTONS
   Hierarchy: primary (hibiscus) = the one action. sun = secondary in-card.
   ghost = tertiary. wa = WhatsApp only. Never two primaries side by side.
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-pill);font-size:.95rem;
  font-variation-settings:"wdth" 98,"wght" 700;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--hibiscus);color:#fff;box-shadow:var(--shadow-m)}
.btn--primary:hover{background:var(--hibiscus-d)}
.btn--sun{background:var(--sun);color:var(--ink)}
.btn--sun:hover{background:#F0B21F}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--sand)}
.btn--light{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-s)}
.btn--wa{background:var(--sea);color:#fff}
.btn--wa:hover{background:var(--sea-deep)}
.btn--sm{padding:11px 18px;font-size:.86rem}
.btn--lg{padding:17px 30px;font-size:1.02rem}
.btn--full{width:100%}
.btn--icon{flex:0 0 46px;width:46px;height:46px;padding:0}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* --------------------------------------------------------------------------
   6. FORMS — inquiry form is the conversion path on every page
   -------------------------------------------------------------------------- */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.82rem;font-variation-settings:"wdth" 94,"wght" 660;color:var(--ink)}
.field label .req{color:var(--hibiscus)}
.input,.select,.textarea{
  width:100%;padding:13px 16px;border-radius:var(--r-md);background:var(--paper);
  border:1.5px solid var(--line);color:var(--ink);font-family:inherit;font-size:.95rem;
  font-variation-settings:"wdth" 98,"wght" 480;transition:border-color .18s,box-shadow .18s}
.input::placeholder,.textarea::placeholder{color:var(--ink-soft);opacity:.7}
.input:focus,.select:focus,.textarea:focus{outline:0;border-color:var(--sea);
  box-shadow:0 0 0 4px rgba(0,179,155,.16)}
.textarea{min-height:120px;resize:vertical;line-height:1.55}
.select{appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2308303B' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.field__hint{font-size:.76rem;color:var(--ink-soft)}
.field--error .input,.field--error .select,.field--error .textarea{border-color:var(--hibiscus)}
.field__error{font-size:.78rem;color:var(--hibiscus);font-variation-settings:"wdth" 94,"wght" 620}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkbox{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--ink-soft)}
.checkbox input{margin-top:4px;accent-color:var(--sea);width:17px;height:17px;flex:0 0 17px}

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */
.card{background:var(--paper);border-radius:var(--r-card);box-shadow:var(--shadow-s);
  padding:24px;transition:transform .25s,box-shadow .25s}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}

/* Tour card — the core commercial unit, used on every listing */
.tour{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow-s);transition:transform .25s,box-shadow .25s}
.tour:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.tour__img{position:relative;overflow:hidden;background:var(--sand-2)}
.tour__img img{width:100%;height:var(--img-card);object-fit:cover;transition:transform .5s ease}
.tour:hover .tour__img img{transform:scale(1.05)}
.tour__badge{position:absolute;top:12px;left:12px;background:rgba(8,48,59,.85);color:var(--sand);
  padding:6px 12px;border-radius:var(--r-pill);backdrop-filter:blur(6px)}
.tour__fav{position:absolute;top:12px;right:12px;background:var(--sun);color:var(--ink);
  padding:6px 12px;border-radius:var(--r-pill)}
.tour__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.tour__facts{display:flex;flex-wrap:wrap;gap:6px 16px}
.tour__facts span{display:flex;align-items:center;gap:7px;font-size:.82rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 94,"wght" 550}
.tour__facts i{width:23px;height:23px;flex:0 0 23px;border-radius:50%;background:var(--sun);
  display:grid;place-items:center;font-size:.72rem;font-style:normal;line-height:1;
  box-shadow:0 1px 3px rgba(8,48,59,.12)}
.tour__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding-top:14px;border-top:1px solid var(--line-soft)}
.tour__actions{display:flex;gap:8px}
.tour__actions .btn{flex:1}
.tour__actions .btn--icon{flex:0 0 46px!important}

.price small{display:block;font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-variation-settings:"wdth" 82,"wght" 660}
.price b{font-size:1.4rem;letter-spacing:-.03em;font-variation-settings:"wdth" 106,"wght" 800}
.price b span{font-size:.78rem;font-variation-settings:"wdth" 96,"wght" 600;color:var(--ink-soft)}
.price--lg b{font-size:2rem}
.price--old{color:var(--ink-soft);text-decoration:line-through;font-size:.9rem;
  font-variation-settings:"wdth" 96,"wght" 560}
.stars{display:flex;align-items:center;gap:5px;font-size:.8rem;color:var(--ink-soft)}
.stars b{color:var(--ink);font-variation-settings:"wdth" 100,"wght" 720}

/* Article / blog card */
.post{display:block;background:var(--paper);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-s);transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.post img{width:100%;height:var(--img-thumb);object-fit:cover}
.post__body{padding:18px 20px 22px;display:grid;gap:8px}

/* Review card */
.review{background:var(--paper);border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:14px}
.review__stars{color:var(--sun);letter-spacing:.1em}
.review p{margin:0;font-size:.97rem}
.review__by{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:8px}
.review__by b{display:block;font-size:.9rem;font-variation-settings:"wdth" 100,"wght" 700}
.avatar{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  font-variation-settings:"wdth" 100,"wght" 780;font-size:.86rem;color:#fff;background:var(--sea)}

/* --------------------------------------------------------------------------
   8. TABS (resort switcher)
   -------------------------------------------------------------------------- */
.ptabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ptab{display:flex;align-items:baseline;gap:8px;padding:12px 20px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font-size:.92rem;box-shadow:var(--shadow-s);
  font-variation-settings:"wdth" 96,"wght" 620;
  transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.ptab small{font-size:.72rem;color:var(--ink-soft);font-variation-settings:"wdth" 86,"wght" 620}
.ptab:hover{transform:translateY(-2px);box-shadow:var(--shadow-m)}
.ptab[aria-selected="true"]{background:var(--ink);color:var(--sand);
  font-variation-settings:"wdth" 96,"wght" 740}
.ptab[aria-selected="true"] small{color:var(--sun)}
.ppanel[hidden]{display:none}
.pnote{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:24px;font-size:.84rem;
  color:var(--ink-soft);font-variation-settings:"wdth" 92,"wght" 560}
.pnote span{display:flex;align-items:center;gap:8px}
.pnote i{width:6px;height:6px;border-radius:50%;background:var(--sun);display:block;flex:0 0 6px}
.pfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:26px}

/* --------------------------------------------------------------------------
   9. PILLS, BADGES, NOTES
   -------------------------------------------------------------------------- */
.pill{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);font-size:.75rem;
  font-variation-settings:"wdth" 90,"wght" 660;background:var(--sand-2);color:var(--ink-soft)}
.pill--ok{background:var(--ok-bg);color:var(--ok-fg)}
.pill--warm{background:var(--warm-bg);color:var(--warm-fg)}
.pill--hot{background:var(--hot-bg);color:var(--hot-fg)}
.pill--sun{background:var(--sun);color:var(--ink)}

.note{display:flex;gap:13px;padding:16px 18px;border-radius:var(--r-md);background:var(--paper);
  border-left:4px solid var(--sea);box-shadow:var(--shadow-s);font-size:.9rem}
.note--warn{border-left-color:var(--sun)}
.note--alert{border-left-color:var(--hibiscus)}
.note b{display:block;font-variation-settings:"wdth" 100,"wght" 720;margin-bottom:3px}

/* Icon tile used in feature lists */
.ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--sun);font-size:1.15rem;font-style:normal}
.ico--sea{background:var(--sea);color:#fff}
.ico--sm{flex:0 0 34px;width:34px;height:34px;border-radius:10px;font-size:1rem}

/* Category pill link */
.cat{display:flex;align-items:center;gap:10px;padding:13px 20px 13px 14px;border-radius:var(--r-pill);
  background:var(--paper);box-shadow:var(--shadow-s);font-size:.94rem;
  font-variation-settings:"wdth" 98,"wght" 620;transition:transform .2s,box-shadow .2s,background .2s}
.cat:hover{transform:translateY(-3px);box-shadow:var(--shadow-m);background:var(--sun)}
.cat i{font-style:normal;font-size:1.2rem}
.cats{display:flex;flex-wrap:wrap;gap:10px}

/* Keyword link cloud (internal linking blocks) */
.cloud{display:flex;flex-wrap:wrap;gap:8px}
.cloud a{padding:9px 15px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--shadow-s);
  font-size:.85rem;font-variation-settings:"wdth" 94,"wght" 560;color:var(--ink-soft);transition:.2s}
.cloud a:hover{background:var(--ink);color:var(--sand)}

/* --------------------------------------------------------------------------
   10. NAVIGATION — breadcrumb, pagination, arrow link
   -------------------------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;
  color:var(--ink-soft);font-variation-settings:"wdth" 92,"wght" 560;padding-block:18px}
.crumbs a:hover{color:var(--sea-deep)}
.crumbs span[aria-current]{color:var(--ink);font-variation-settings:"wdth" 92,"wght" 700}
.crumbs .sep{opacity:.45}

.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.pager a,.pager span{min-width:44px;height:44px;display:grid;place-items:center;padding-inline:14px;
  border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--shadow-s);font-size:.9rem;
  font-variation-settings:"wdth" 96,"wght" 620}
.pager a:hover{background:var(--sun)}
.pager [aria-current="page"]{background:var(--ink);color:var(--sand)}

.arrow-link{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--sea-deep);
  font-variation-settings:"wdth" 98,"wght" 720}
.arrow-link svg{transition:transform .22s}
.arrow-link:hover svg{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   11. TABLES — comparison / price / season blocks
   -------------------------------------------------------------------------- */
.tbl-wrap{overflow-x:auto;border-radius:var(--r-card);box-shadow:var(--shadow-s);background:var(--paper)}
.tbl-wrap table{width:100%;border-collapse:collapse;min-width:540px}
.tbl-wrap caption{text-align:left;padding:20px 22px 0;font-size:.88rem;color:var(--ink-soft)}
.tbl-wrap th,.tbl-wrap td{padding:13px 18px;text-align:left;font-size:.9rem;
  border-bottom:1px solid var(--line-soft)}
.tbl-wrap thead th{background:var(--ink);color:var(--sand);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-variation-settings:"wdth" 84,"wght" 700;border-bottom:0}
.tbl-wrap tbody th{font-variation-settings:"wdth" 100,"wght" 700}
.tbl-wrap tbody tr:last-child th,.tbl-wrap tbody tr:last-child td{border-bottom:0}
.tbl-wrap tbody tr:hover{background:var(--sand)}

/* --------------------------------------------------------------------------
   12. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;text-align:left;font-size:1.03rem;
  font-variation-settings:"wdth" 102,"wght" 680;letter-spacing:-.01em}
.faq__q:hover{color:var(--sea-deep)}
.faq__ico{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--sun);
  display:grid;place-items:center;transition:transform .28s}
.faq__q[aria-expanded="true"] .faq__ico{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{margin:0 0 22px;color:var(--ink-soft);max-width:72ch}

/* --------------------------------------------------------------------------
   13. TOUR PAGE COMPONENTS
   -------------------------------------------------------------------------- */
/* Sticky price / booking box in the sidebar */
.booking{position:sticky;top:90px;background:var(--paper);border-radius:var(--r-card);
  padding:24px;box-shadow:var(--shadow-l)}
.booking__price{display:flex;align-items:flex-end;gap:10px;padding-bottom:16px;
  border-bottom:1px solid var(--line-soft);margin-bottom:16px}
.booking__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px;font-size:.88rem}
.booking__list li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-soft)}
.booking__list svg{flex:0 0 16px;margin-top:4px;color:var(--sea)}

/* Step-by-step itinerary — vertical line with dots, no clock times */
.itin{list-style:none;margin:0;padding:0 0 0 28px;position:relative;display:grid;gap:0}
.itin::before{content:"";position:absolute;left:6px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--sea),var(--sun))}
.itin li{position:relative;padding:15px 0;border-bottom:1px solid var(--line-soft)}
.itin li:last-child{border-bottom:0}
.itin li::before{content:"";position:absolute;left:-28px;top:20px;width:14px;height:14px;
  border-radius:50%;background:var(--sand);border:3px solid var(--sea);box-sizing:border-box}
.itin li:first-child::before,.itin li:last-child::before{background:var(--sun);border-color:var(--sun)}
.section--band .itin li::before{background:var(--sand-2)}
.itin b{display:block;font-variation-settings:"wdth" 102,"wght" 700;margin-bottom:4px}
.itin p{margin:0;font-size:.9rem;color:var(--ink-soft)}

/* Included / not included */
.incl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.incl li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.incl svg{flex:0 0 18px;margin-top:4px}
.incl--yes svg{color:var(--sea)}
.incl--no svg{color:var(--hibiscus)}
.incl--no li{color:var(--ink-soft)}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery a{border-radius:var(--r-md);overflow:hidden;background:var(--sand-2)}
.gallery img{width:100%;height:clamp(110px,13vw,150px);object-fit:cover;transition:transform .4s}
.gallery a:hover img{transform:scale(1.07)}
.gallery a:first-child{grid-column:span 2;grid-row:span 2}
.gallery a:first-child img{height:clamp(230px,27vw,310px)}

/* Mobile sticky action bar — tour pages only */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;
  align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:var(--paper);box-shadow:0 -8px 28px -16px rgba(8,48,59,.5)}
.stickybar .price{margin-right:auto}
.stickybar .btn{flex:0 0 auto}

/* --------------------------------------------------------------------------
   14. HEADER / FOOTER
   -------------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,247,236,.85);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 20px -18px rgba(8,48,59,.6)}
.hdr__in{display:flex;align-items:center;gap:20px;min-height:70px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto}
.logo__mark{width:34px;height:34px;flex:0 0 34px}
.logo__txt{line-height:1}
.logo__txt b{display:block;font-size:1.02rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 110,"wght" 800}
.logo__txt span{display:block;font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sea-deep);font-variation-settings:"wdth" 80,"wght" 650}
.nav{display:flex;align-items:center;gap:24px}
.nav a{font-size:.92rem;font-variation-settings:"wdth" 96,"wght" 580;position:relative;padding-block:4px}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--sun);
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:hover::after{transform:scaleX(1)}
.burger{display:none;width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center}
.burger span{display:block;width:19px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:2px;
  background:var(--ink);transition:.22s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

.ticker{background:var(--ink);color:var(--sand);overflow:hidden;padding-block:14px}
.ticker ul{list-style:none;margin:0;padding:0}
.ticker__track{display:flex;width:max-content;animation:slide 36s linear infinite}
.ticker__track li{display:flex;align-items:center;gap:14px;padding-inline:22px;white-space:nowrap;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:"wdth" 86,"wght" 620}
.ticker__dot{width:6px;height:6px;border-radius:50%;background:var(--sun)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.cta{background:linear-gradient(120deg,var(--sea-deep),var(--sea) 55%,#3ED0B4);color:#fff;
  border-radius:var(--r-card);padding:clamp(30px,5vw,56px);display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:26px;box-shadow:var(--shadow-l)}
.cta .h2{color:#fff}
.cta p{margin:0;color:rgba(255,255,255,.9);max-width:46ch}

.ftr{background:var(--ink);color:rgba(255,247,236,.68);
  padding-block:44px 28px;margin-top:var(--pad-section)}
.ftr__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.ftr h4{color:var(--sand);font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;
  font-variation-settings:"wdth" 82,"wght" 700;margin:0 0 16px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{font-size:.89rem;transition:color .18s}
.ftr a:hover{color:var(--sun)}
.ftr__about p{font-size:.89rem;max-width:34ch;margin:14px 0 16px}
.ftr__addr{font-style:normal;display:grid;gap:3px;font-size:.87rem;margin-bottom:20px;
  padding-left:14px;border-left:2px solid var(--sun)}
.ftr__bottom{margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,247,236,.14);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.8rem}

/* --------------------------------------------------------------------------
   15. MOTION
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.25,1)}
.reveal.is-in{opacity:1;transform:none}
/* Never put .reveal inside a hidden tab panel — the observer will not fire. */

/* --------------------------------------------------------------------------
   16. UTILITIES
   -------------------------------------------------------------------------- */
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.u-center{text-align:center}
.u-mt-0{margin-top:0}.u-mb-0{margin-bottom:0}
.u-mt-s{margin-top:14px}.u-mt-m{margin-top:26px}.u-mt-l{margin-top:36px}
.u-pt-0{padding-top:0}.u-pb-0{padding-bottom:0}
.u-hide{display:none}
.u-flow>*+*{margin-top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --------------------------------------------------------------------------
   17. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .booking{position:static}
  .ftr__grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:820px){
  .nav{position:fixed;inset:70px 0 auto;background:var(--sand);flex-direction:column;
    align-items:stretch;gap:0;padding:10px 22px 26px;border-bottom:1px solid var(--line);
    transform:translateY(-140%);transition:transform .32s cubic-bezier(.3,.8,.25,1);
    box-shadow:var(--shadow-m)}
  .nav.is-open{transform:none}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:1.02rem}
  .nav a::after{display:none}
  .burger{display:flex}
  .hdr__cta{display:none}
  .stickybar{display:flex}
  body.has-stickybar{padding-bottom:78px}
}
@media (max-width:640px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ptab{padding:10px 15px;font-size:.85rem}
  .pfoot{gap:10px}
  .pfoot .btn{width:100%}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery a:first-child{grid-column:span 2;grid-row:auto}
  .itin li{grid-template-columns:64px 1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   18. SMALL-SCREEN SAFETY
   Romanian words are long and the diacritics ă î â ș ț need vertical room.
   Tight line-heights + nowrap buttons clip text on phones — these rules undo
   that. Keep this block LAST.
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,p,li,td,th,a,span,b,label,button{overflow-wrap:break-word}
.display,.h1,.h2,.h3,.h4{hyphens:auto;-webkit-hyphens:auto}
/* buttons wrap instead of overflowing their container */
.btn{white-space:normal;text-align:center;line-height:1.25}
.btn--nowrap{white-space:nowrap}

@media (max-width:720px){
  body{font-size:1rem}
  .wrap{padding-inline:16px}

  /* headings: more leading, less negative tracking */
  .display{font-size:clamp(2rem,8.6vw,2.7rem);line-height:1.05;letter-spacing:-.02em}
  .h1{font-size:clamp(1.62rem,7vw,2.2rem);line-height:1.12;letter-spacing:-.018em}
  .h2{font-size:clamp(1.42rem,6.2vw,1.85rem);line-height:1.16;letter-spacing:-.016em}
  .h3{font-size:1.06rem;line-height:1.32;letter-spacing:-.008em}
  .h4{font-size:.97rem;line-height:1.35}
  .lede{font-size:1rem;line-height:1.58}
  .eyebrow{letter-spacing:.14em;margin-bottom:10px}

  /* forms: 16px stops iOS from zooming on focus */
  .input,.select,.textarea{font-size:16px;padding:12px 14px}
  .booking{padding:18px}

  /* header */
  .hdr__in{gap:12px;min-height:64px}
  .logo__txt b{font-size:.95rem}
  .logo__txt span{font-size:.53rem;letter-spacing:.16em}
  .nav{inset:64px 0 auto}

  /* tables scroll instead of squeezing */
  .tbl-wrap table{min-width:440px}
  .tbl-wrap th,.tbl-wrap td{padding:11px 13px;font-size:.86rem}

  /* tour page bits */
  .itin{padding-left:24px}
  .itin li{padding:13px 0}
  .itin li::before{left:-24px;top:18px;width:12px;height:12px}
  .gallery img{height:92px}
  .gallery a:first-child img{height:196px}
  .cta{padding:24px;gap:18px}
  .cta .btn{width:100%}
  .stickybar{gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .stickybar .btn{padding:11px 14px;font-size:.82rem}
  .stickybar .price b{font-size:1.15rem}
  .ftr__grid{gap:26px}
}

@media (max-width:420px){
  .tour__facts{gap:4px 12px}
  .tour__facts span{font-size:.78rem}
  .tour__body{padding:16px 16px 18px}
  .quickbar div{padding:13px 12px}
  .review{padding:20px}
  .ftr__grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   19. OVERFLOW CONTAINMENT  (must stay last)
   Grid and flex children default to min-width:auto, so ONE wide child — a
   table with min-width, a long URL, a nowrap element — stretches its whole
   column past the viewport and the entire page scrolls sideways, clipping
   every heading and paragraph in that column. min-width:0 lets them shrink
   and lets .tbl-wrap scroll on its own instead.
   -------------------------------------------------------------------------- */
html{overflow-x:hidden}
main,section,.wrap,.grid>*,.split>*,.tblock,.ppanel,.tour,.tour__body,.post,
.review,.card,.booking,.itin li,.field,.thero__head>*{min-width:0}
.tbl-wrap{max-width:100%;width:100%}
.tbl-wrap table{min-width:100%;width:max-content}
.prose,.lede,p,li,h1,h2,h3,h4{max-width:100%}

/* --------------------------------------------------------------------------
   20. AUTHOR / EDITORIAL BOX
   Sits at the end of every article. Signs the content with the organisation,
   not a person — no names, no photos anywhere on this site.
   -------------------------------------------------------------------------- */
.author{display:grid;grid-template-columns:auto 1fr;gap:20px;background:var(--paper);
  border-radius:var(--r-card);padding:clamp(20px,3vw,28px);box-shadow:var(--shadow-s);
  border-left:4px solid var(--sun)}
.author__mark{width:58px;height:58px;flex:0 0 58px;border-radius:16px;background:var(--ink);
  display:grid;place-items:center}
.author__mark svg{width:36px;height:36px}
.author__name{font-size:1.08rem;letter-spacing:-.015em;margin:0;
  font-variation-settings:"wdth" 104,"wght" 760}
.author__role{display:block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sea-deep);margin-top:5px;font-variation-settings:"wdth" 82,"wght" 700}
.author p{margin:12px 0 0;font-size:.92rem;color:var(--ink-soft);max-width:70ch}
.author__creds{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.author__creds span{font-size:.74rem;padding:5px 11px;border-radius:var(--r-pill);
  background:var(--sand-2);color:var(--ink-soft);font-variation-settings:"wdth" 90,"wght" 620}
.author__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.author__policy{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
  font-size:.82rem;color:var(--ink-soft)}
.author__policy b{font-variation-settings:"wdth" 100,"wght" 700;color:var(--ink)}
@media (max-width:640px){
  .author{grid-template-columns:1fr;gap:14px}
  .author__links .btn{width:100%}
}

/* --------------------------------------------------------------------------
   21. ARTICLE & LEGAL PAGE LAYOUT
   Shared by /ghid/ articles and by the policy pages (terms, payment,
   cancellation, privacy). Use with .split: content left, .toc right.
   -------------------------------------------------------------------------- */
.arthead{padding-block:6px 24px}
.arthead .h1{margin-bottom:14px}
.artmeta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.84rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 92,"wght" 560;margin-top:16px}
.artmeta span{display:flex;align-items:center;gap:7px}
.artimg{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);
  margin:0 0 30px;background:var(--sand-2)}
.artimg img{width:100%;height:clamp(220px,30vw,360px);object-fit:cover}

.artsec{scroll-margin-top:90px;margin-bottom:32px}
.artsec>h2{font-size:clamp(1.35rem,2.6vw,1.85rem);letter-spacing:-.024em;line-height:1.14;
  font-variation-settings:"wdth" 106,"wght" 770;margin:0 0 12px}
.artsec>h3{font-size:1.12rem;letter-spacing:-.012em;margin:26px 0 8px;
  font-variation-settings:"wdth" 104,"wght" 720}
.artsec p{margin:0 0 1.05em;max-width:72ch}
.artsec ul,.artsec ol{margin:0 0 1.2em;padding-left:1.2em;max-width:72ch}
.artsec li{margin-bottom:.5em}
.artsec a{color:var(--sea-deep);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--sun)}

.toc{position:sticky;top:90px;background:var(--paper);border-radius:var(--r-card);padding:22px;
  box-shadow:var(--shadow-s)}
.toc p{margin:0 0 12px;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sea-deep);font-variation-settings:"wdth" 82,"wght" 700}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:block;padding:7px 0 7px 26px;font-size:.86rem;color:var(--ink-soft);position:relative;
  font-variation-settings:"wdth" 94,"wght" 560;border-left:2px solid transparent;transition:.18s}
.toc a::before{counter-increment:t;content:counter(t,decimal-leading-zero);position:absolute;left:10px;
  font-size:.68rem;color:var(--sea-deep);top:9px;font-variation-settings:"wdth" 82,"wght" 700}
.toc a:hover,.toc a.is-active{color:var(--ink);border-left-color:var(--sun);
  font-variation-settings:"wdth" 94,"wght" 700}

.tldr{background:var(--ink);color:var(--sand);border-radius:var(--r-card);padding:clamp(22px,3vw,30px);
  margin-bottom:30px}
.tldr h2{margin:0 0 14px;font-size:1.15rem;letter-spacing:-.015em;color:var(--sun);
  font-variation-settings:"wdth" 104,"wght" 760}
.tldr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.tldr li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:rgba(255,247,236,.85)}
.tldr li b{color:var(--sand);font-variation-settings:"wdth" 100,"wght" 740}
.tldr i{width:7px;height:7px;border-radius:50%;background:var(--sun);flex:0 0 7px;margin-top:9px;display:block}

@media (max-width:1000px){.toc{position:static}}
@media (max-width:720px){.artsec{scroll-margin-top:76px}}

/* ==========================================================
   HOMEPAGE (front-page)
   Moved out of index.html during the WP port.
   ========================================================== */
/* ============================================================
   EGIPTEXCURSII.COM — DESIGN TOKENS
   Un singur font: Archivo Variable (wdth 62–125, wght 100–900)
   ============================================================ */
:root{
  --ink:#08303B; --ink-soft:#4A6B72;
  --sea:#00B39B; --sea-deep:#04707A;
  --sun:#FFC53D; --hibiscus:#FF5A5F; --hibiscus-d:#E8464B;
  --sand:#FFF7EC; --sand-2:#FDEEDC; --paper:#FFFFFF;
  --line:rgba(8,48,59,.12); --line-soft:rgba(8,48,59,.07);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-card:20px; --r-pill:999px;
  --pad-section:40px;
  --gap:clamp(16px,2.2vw,28px);
  --maxw:1180px;
  --shadow-s:0 2px 8px rgba(8,48,59,.06);
  --shadow-m:0 14px 34px -18px rgba(8,48,59,.35);
  --shadow-l:0 30px 60px -30px rgba(8,48,59,.45);
}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--font);
  font-variation-settings:"wdth" 100,"wght" 420;font-size:1.0625rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;border-radius:var(--r-pill);font-size:.95rem;
  font-variation-settings:"wdth" 98,"wght" 700;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease;
  white-space:nowrap}
/* ================= HERO ================= */
.hero{position:relative;padding-block:32px 48px}
.hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,58px);align-items:center}
.hero__title .sun-word{position:relative;display:inline-block;color:var(--sea-deep)}
.hero__title .sun-word::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.06em;height:.3em;
  background:var(--sun);border-radius:4px;z-index:-1;transform:scaleX(0);transform-origin:left;
  animation:swipe .7s .35s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.hero__lede{margin-top:22px}
.hero__proof{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.hero__proof ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.hero__proof li{display:flex;align-items:center;gap:7px;font-size:.86rem;
  font-variation-settings:"wdth" 94,"wght" 560;color:var(--ink-soft)}
.check{width:16px;height:16px;flex:0 0 16px;color:var(--sea)}
.hero__visual{position:relative}
.shot{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand-2)}
.shot img{width:100%;height:clamp(300px,44vw,530px);object-fit:cover}
.shot--small{position:absolute;right:-10px;bottom:-26px;width:44%;border-radius:20px;border:6px solid var(--sand)}
.shot--small img{height:clamp(130px,19vw,230px)}
.scene__chip{position:absolute;left:-14px;top:34px;z-index:3;background:var(--paper);border-radius:16px;
  padding:12px 16px;box-shadow:var(--shadow-l);display:flex;align-items:center;gap:12px}
.scene__chip b{display:block;font-size:.88rem;font-variation-settings:"wdth" 104,"wght" 720;letter-spacing:-.01em}
.scene__price{background:var(--sun);border-radius:11px;padding:7px 11px;text-align:center;line-height:1.1}
.scene__price small{display:block;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 80,"wght" 700}
.scene__price b{font-size:1rem;font-variation-settings:"wdth" 106,"wght" 800}
/* ================= CUM REZERVI + CHAT MOCK ================= */
.book{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,58px);align-items:center}
.bsteps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;position:relative}
.bsteps li{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:0 0 26px;position:relative}
.bsteps li:last-child{padding-bottom:0}
.bsteps li::before{content:"";position:absolute;left:22px;top:44px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--sun),rgba(255,197,61,.25))}
.bsteps li:last-child::before{display:none}
.bsteps__n{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:var(--sun);font-size:1.02rem;
  font-variation-settings:"wdth" 104,"wght" 800;position:relative;z-index:1}
.bsteps h3{margin:11px 0 4px}
.bsteps p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.55}
.bproof{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line)}
.bproof span{font-size:.85rem;color:var(--sea-deep);font-variation-settings:"wdth" 94,"wght" 660}
.chat{background:var(--paper);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-l);
  max-width:430px;margin-inline:auto;width:100%}
.chat__bar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--ink);color:var(--sand)}
.chat__ava{width:40px;height:40px;flex:0 0 40px;border-radius:50%;background:rgba(255,247,236,.1);
  display:grid;place-items:center}
.chat__ava svg{width:26px;height:26px}
.chat__bar b{display:block;font-size:.95rem;font-variation-settings:"wdth" 102,"wght" 740}
.chat__bar span{display:block;font-size:.72rem;color:var(--sun);
  font-variation-settings:"wdth" 90,"wght" 560}
.chat__body{padding:18px;display:grid;gap:10px;background:#F3EDE2}
.msg{max-width:86%;padding:11px 14px;border-radius:16px;font-size:.89rem;line-height:1.5;
  position:relative;box-shadow:0 1px 2px rgba(8,48,59,.1)}
.msg time{display:block;font-size:.66rem;opacity:.55;margin-top:5px;text-align:right;
  font-variation-settings:"wdth" 88,"wght" 560}
.msg--out{justify-self:end;background:#D7F4EC;color:var(--ink);border-bottom-right-radius:5px}
.msg--in{justify-self:start;background:var(--paper);color:var(--ink);border-bottom-left-radius:5px}
.chat__note{margin-top:6px;text-align:center;font-size:.72rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 90,"wght" 560}
@media (max-width:1000px){.book{grid-template-columns:1fr;gap:40px}}
@media (max-width:720px){
  .bsteps li{grid-template-columns:40px 1fr;gap:14px}
  .bsteps__n{width:40px;height:40px;font-size:.95rem}
  .bsteps li::before{left:19px;top:40px}
  .msg{max-width:92%;font-size:.86rem}
}
/* ================= PLANNER (secțiunea principală) ================= */
.planner{background:var(--sand-2)}
.pall{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--sea-deep);
  font-variation-settings:"wdth" 98,"wght" 720}
.pall svg{transition:transform .22s}
.pall:hover svg{transform:translateX(4px)}
.tour__img img{width:100%;height:clamp(210px,23vw,235px);object-fit:cover;transition:transform .5s ease}
.tour__wa{flex:0 0 46px!important;padding:0;width:46px;height:46px;background:var(--sea);color:#fff}
.tour__wa:hover{background:var(--sea-deep)}
/* ================= DE CE NOI ================= */
.why{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:center}
.why__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l)}
.why__img img{width:100%;height:clamp(280px,40vw,520px);object-fit:cover}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:26px}
.reason{display:flex;gap:13px;align-items:flex-start}
.reason__ico{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--sun);font-size:1.15rem}
.reason p{margin:5px 0 0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
table{width:100%;border-collapse:collapse;min-width:540px}
caption{text-align:left;padding:20px 22px 0;font-size:.88rem;color:var(--ink-soft)}
th,td{padding:13px 18px;text-align:left;font-size:.9rem;border-bottom:1px solid var(--line-soft)}
thead th{background:var(--ink);color:var(--sand);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 84,"wght" 700;border-bottom:0}
tbody th{font-variation-settings:"wdth" 100,"wght" 700}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--sand)}
.pill-ok{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);background:#DFF5EF;
  color:var(--sea-deep);font-size:.75rem;font-variation-settings:"wdth" 90,"wght" 660}
.pill-warm{background:#FFE7B8;color:#8A5B00}
.pill-hot{background:#FFDCD9;color:#B03A3E}
/* ================= STEPS / REVIEWS / BLOG / FAQ ================= */
.steps{counter-reset:s;display:grid;gap:var(--gap);grid-template-columns:repeat(3,1fr)}
.step{position:relative;padding-top:26px;border-top:3px solid var(--ink)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:-3px;left:0;
  transform:translateY(-100%);font-size:.74rem;letter-spacing:.18em;color:var(--hibiscus);
  font-variation-settings:"wdth" 82,"wght" 760;padding-bottom:8px}
.step p{color:var(--ink-soft);margin:9px 0 0}
.avatar{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  font-variation-settings:"wdth" 100,"wght" 780;font-size:.95rem;color:#fff}
.review__by .avatar{width:38px;height:38px;flex:0 0 38px;font-size:.86rem}
.post img{width:100%;height:clamp(195px,22vw,215px);object-fit:cover}
/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3,.steps{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1fr 1fr 1fr}
  .hero__grid,.why{grid-template-columns:1fr;gap:44px}
  .hero__visual{max-width:460px}
}
@media (max-width:820px){
  .nav{position:fixed;inset:70px 0 auto;background:var(--sand);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 22px 26px;border-bottom:1px solid var(--line);transform:translateY(-140%);
    transition:transform .32s cubic-bezier(.3,.8,.25,1);box-shadow:var(--shadow-m)}
  .nav.is-open{transform:none}
  .nav a{padding:15px 0;border-bottom:1px solid var(--line-soft);font-size:1.02rem}
  .nav a::after{display:none}
  .burger{display:flex}
  .hdr__cta{display:none}
}
@media (max-width:640px){
  .grid--3,.grid--2,.grid--4,.steps{grid-template-columns:1fr}
  .reasons{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .shot--small{width:50%;right:0;bottom:-20px}
  .scene__chip{left:0}
  .ptab{padding:10px 15px;font-size:.85rem}
  .pfoot{gap:10px}
  .pfoot .btn{width:100%}
}
.display,.h2,.h3,.h4{hyphens:auto;-webkit-hyphens:auto}
@media (max-width:720px){
  body{font-size:1rem}
  .wrap{padding-inline:16px}
  .display{font-size:clamp(2rem,8.6vw,2.7rem);line-height:1.05;letter-spacing:-.02em}
  .h2{font-size:clamp(1.42rem,6.2vw,1.85rem);line-height:1.16;letter-spacing:-.016em}
  .h3{font-size:1.06rem;line-height:1.32;letter-spacing:-.008em}
  .h4{font-size:.97rem;line-height:1.35}
  .lede{font-size:1rem;line-height:1.58}
  .eyebrow{letter-spacing:.14em;margin-bottom:10px}
  .hdr__in{gap:12px;min-height:64px}
  .logo__txt b{font-size:.95rem}
  .logo__txt span{font-size:.53rem;letter-spacing:.16em}
  .nav{inset:64px 0 auto}
  .tbl-wrap table{min-width:440px}
  .tbl-wrap th,.tbl-wrap td{padding:11px 13px;font-size:.86rem}
  .cta{padding:24px;gap:18px}
  .cta .btn{width:100%}
  .scene__chip{position:static;margin-top:14px;box-shadow:var(--shadow-m)}
  .shot--small{width:46%;right:0;bottom:-16px}
  .ftr__grid{gap:26px}
}
@media (max-width:420px){
  .tour__facts{gap:4px 12px}
  .tour__facts span{font-size:.78rem}
  .tour__body{padding:16px 16px 18px}
  .ftr__grid{grid-template-columns:1fr}
}
main,section,.wrap,.grid>*,.tour,.tour__body,.post,.review,.ppanel,.why>*{min-width:0}
p,li,h1,h2,h3,h4,.lede{max-width:100%}

/* ==========================================================
   RESORT ARCHIVE (taxonomy-egx_resort)
   Moved out of excursii-hurghada/index.html during the WP port.
   ========================================================== */
/* ---- doar pentru pagina de categorie ---- */
.hubhero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,52px);align-items:center;
  padding-block:8px 30px}
.hubhero__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand-2)}
.hubhero__img img{width:100%;height:clamp(230px,32vw,380px);object-fit:cover}
.hubstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s);margin-top:26px}
.hubstats div{background:var(--paper);padding:16px 18px}
.hubstats b{display:block;font-size:1.1rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 780}
.hubstats span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:5px;line-height:1.35;font-variation-settings:"wdth" 82,"wght" 660}
.filters{position:sticky;top:70px;z-index:40;background:var(--sand);padding-block:14px;
  margin-bottom:22px;border-bottom:1px solid var(--line)}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:flex;align-items:baseline;gap:7px;padding:10px 17px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font-size:.88rem;box-shadow:var(--shadow-s);
  font-variation-settings:"wdth" 96,"wght" 620;transition:background .2s,color .2s,transform .2s}
.fchip small{font-size:.7rem;color:var(--ink-soft);font-variation-settings:"wdth" 86,"wght" 620}
.fchip:hover{transform:translateY(-2px)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--sand)}
.fchip[aria-pressed="true"] small{color:var(--sun)}
.tour[hidden]{display:none}
.fcount{margin:0 0 20px;font-size:.85rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 92,"wght" 560}
.tour__body .h3 a:hover{color:var(--sea-deep)}
@media (max-width:1000px){.hubhero{grid-template-columns:1fr}}
@media (max-width:720px){
  .hubstats{grid-template-columns:1fr 1fr}
  .hubstats b{font-size:1rem}
  .filters{top:64px;padding-block:11px}
  .fchip{padding:9px 14px;font-size:.82rem}
}

/* ==========================================================
   SINGLE TOUR (single-egx_tour)
   Moved out of excursii-hurghada/cairo-cu-avionul/index.html during the WP port.
   ========================================================== */
/* ---- doar pentru pagina de tur ---- */
.thero{padding-block:6px 28px}
.thero__head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-bottom:24px}
.thero__facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px}
.thero__facts span{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 94,"wght" 560}
.thero__facts b{color:var(--ink);font-variation-settings:"wdth" 96,"wght" 720}
.tprice-top{text-align:right}
.quickbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s);margin-bottom:clamp(28px,4vw,42px)}
.quickbar div{background:var(--paper);padding:18px 20px}
.quickbar b{display:block;font-size:1.15rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 780}
.quickbar span{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.35;
  color:var(--ink-soft);margin-top:5px;font-variation-settings:"wdth" 82,"wght" 660}
.tblock{margin-bottom:34px}
.tblock>h2{font-size:clamp(1.4rem,2.5vw,1.9rem);letter-spacing:-.025em;line-height:1.1;
  font-variation-settings:"wdth" 106,"wght" 770;margin:0 0 8px}
.tblock>.lede{margin-bottom:22px}
@media (max-width:820px){
  .thero__head{grid-template-columns:1fr;gap:16px}
  .tprice-top{text-align:left;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .tprice-top .u-mt-s{margin-top:0}
  .quickbar{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .thero__facts{gap:6px 14px;margin-top:12px}
  .thero__facts span{font-size:.83rem}
  .quickbar b{font-size:1.02rem}
  .quickbar span{font-size:.63rem;letter-spacing:.1em}
  .tblock>h2{font-size:clamp(1.3rem,5.8vw,1.6rem);line-height:1.18;letter-spacing:-.015em}
}

/* ==========================================================
   ALL TOURS (page-excursii)
   Moved out of excursii/index.html during the WP port.
   ========================================================== */
/* ---- filtre pe pagina cu toate excursiile ---- */
.filters{position:sticky;top:70px;z-index:40;background:var(--sand);padding-block:14px;
  margin-bottom:20px;border-bottom:1px solid var(--line)}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:9px}
.fgroup:last-child{margin-bottom:0}
.fgroup>b{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
  font-variation-settings:"wdth" 82,"wght" 700;min-width:74px}
.fchip{display:flex;align-items:baseline;gap:7px;padding:9px 15px;border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);font-size:.85rem;box-shadow:var(--shadow-s);
  font-variation-settings:"wdth" 96,"wght" 620;transition:background .2s,color .2s,transform .2s}
.fchip small{font-size:.69rem;color:var(--ink-soft);font-variation-settings:"wdth" 86,"wght" 620}
.fcount{margin:0 0 20px;font-size:.86rem;color:var(--ink-soft);
  font-variation-settings:"wdth" 92,"wght" 560}
.empty{display:none;text-align:center;padding:50px 20px;background:var(--paper);
  border-radius:var(--r-card);box-shadow:var(--shadow-s)}
.empty.is-on{display:block}
@media (max-width:720px){.filters{top:64px;padding-block:11px}
  .fgroup>b{min-width:100%;margin-bottom:2px}.fchip{padding:8px 13px;font-size:.8rem}}

/* ==========================================================
   TOUR TYPES INDEX (page-tipuri)
   Moved out of tipuri-de-excursii/index.html during the WP port.
   ========================================================== */
.tile{display:block;background:var(--paper);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-s);transition:transform .25s,box-shadow .25s}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow-l)}
.tile__img{position:relative;overflow:hidden;background:var(--sand-2)}
.tile__img img{width:100%;height:clamp(180px,20vw,200px);object-fit:cover;transition:transform .5s}
.tile:hover .tile__img img{transform:scale(1.06)}
.tile__n{position:absolute;top:12px;right:12px;background:var(--sun);color:var(--ink);
  padding:5px 11px;border-radius:var(--r-pill);font-size:.72rem;
  font-variation-settings:"wdth" 88,"wght" 720}
.tile__body{padding:18px 20px 22px;display:grid;gap:7px}
.tile__body p{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.5}
.big404{font-size:clamp(5rem,20vw,11rem);line-height:.82;letter-spacing:-.06em;color:var(--sun);
  font-variation-settings:"wdth" 118,"wght" 900;margin:0 0 6px}
.center-wrap{max-width:60ch;margin-inline:auto;text-align:center;padding-block:48px}
.center-wrap .lede{margin-inline:auto}
.center-wrap .hero__actions{justify-content:center}

/* ==========================================================
   TOUR TYPE ARCHIVE (taxonomy-egx_tour_type)
   Moved out of tipuri-de-excursii/snorkeling-si-insule/index.html during the WP port.
   ========================================================== */
/* ---- doar pentru pagina de categorie transversală ---- */
.cathero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,52px);align-items:center;
  padding-block:8px 30px}
.cathero__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand-2)}
.cathero__img img{width:100%;height:clamp(230px,32vw,380px);object-fit:cover}
.catstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s);margin-top:26px}
.catstats div{background:var(--paper);padding:16px 18px}
.catstats b{display:block;font-size:1.1rem;letter-spacing:-.02em;
  font-variation-settings:"wdth" 104,"wght" 780}
.catstats span{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:5px;line-height:1.35;font-variation-settings:"wdth" 82,"wght" 660}
.lvl{display:inline-flex;gap:3px;vertical-align:middle}
.lvl i{width:7px;height:7px;border-radius:50%;background:var(--line);display:block}
.lvl i.on{background:var(--sea)}
@media (max-width:1000px){.cathero{grid-template-columns:1fr}}
@media (max-width:720px){.catstats{grid-template-columns:1fr}.catstats b{font-size:1rem}}

/* ==========================================================
   ARTICLE (single)
   Moved out of ghid/cat-costa-excursiile-in-egipt/index.html during the WP port.
   ========================================================== */
.artimg{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);
  margin-bottom:clamp(28px,4vw,44px);background:var(--sand-2)}
.budget{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.budget .card{display:flex;flex-direction:column;gap:10px}
.budget .card>b{font-size:1.05rem;font-variation-settings:"wdth" 104,"wght" 760}
.budget ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:.87rem;color:var(--ink-soft)}
.budget li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line-soft);
  padding-bottom:6px}
.budget .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:auto;padding-top:12px;
  border-top:2px solid var(--ink)}
.budget .tot b{font-size:1.3rem;letter-spacing:-.03em;font-variation-settings:"wdth" 106,"wght" 800}
@media (max-width:720px){
  .budget{grid-template-columns:1fr}
  .artsec{scroll-margin-top:76px}
}

/* ==========================================================
   ABOUT (page-despre)
   Moved out of despre-noi/index.html during the WP port.
   ========================================================== */
/* ---- pagini de prezentare ---- */
.phero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,52px);align-items:center;
  padding-block:8px 30px}
.phero__img{border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-l);background:var(--sand-2)}
.phero__img img{width:100%;height:clamp(230px,32vw,380px);object-fit:cover}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s)}
.numbers div{background:var(--paper);padding:22px 20px}
.numbers b{display:block;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.03em;line-height:1;
  font-variation-settings:"wdth" 108,"wght" 800}
.numbers span{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:8px;line-height:1.35;font-variation-settings:"wdth" 82,"wght" 660}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.vs__col{border-radius:var(--r-card);padding:26px}
.vs__col--them{background:var(--sand-2)}
.vs__col--us{background:var(--ink);color:var(--sand)}
.vs__col h3{margin:0 0 16px;font-size:1.05rem;letter-spacing:-.015em;
  font-variation-settings:"wdth" 104,"wght" 760}
.vs__col--them h3{color:var(--ink-soft)}
.vs__col--us h3{color:var(--sun)}
.vs__col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vs__col li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem}
.vs__col--them li{color:var(--ink-soft)}
.vs__col--us li{color:rgba(255,247,236,.86)}
.vs__col svg{flex:0 0 18px;margin-top:3px}
.vs__col--them svg{color:var(--hibiscus)}
.vs__col--us svg{color:var(--sea)}
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:24px 28px}
.reason{display:flex;gap:14px;align-items:flex-start}
.reason h3{margin:0 0 5px;font-size:1.02rem;letter-spacing:-.012em;
  font-variation-settings:"wdth" 102,"wght" 720}
.reason p{margin:0;font-size:.91rem;color:var(--ink-soft);line-height:1.55}
@media (max-width:1000px){.phero{grid-template-columns:1fr}.numbers{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.vs{grid-template-columns:1fr}.reasons{grid-template-columns:1fr}}

/* ==========================================================
   CONTACT (page-contact)
   Moved out of contact/index.html during the WP port.
   ========================================================== */
/* ---- doar pentru pagina de contact ---- */
.chan{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-bottom:clamp(34px,5vw,52px)}
.chan__item{background:var(--paper);border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow-s);
  display:flex;flex-direction:column;gap:10px;transition:transform .25s,box-shadow .25s}
.chan__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-l)}
.chan__item--wa{background:var(--ink);color:var(--sand)}
.chan__item--wa .meta{color:rgba(255,247,236,.7)}
.chan__ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--sun);
  color:var(--ink);margin-bottom:4px}
.chan__item--wa .chan__ico{background:var(--sea);color:#fff}
.chan__item b{font-size:1.06rem;letter-spacing:-.015em;font-variation-settings:"wdth" 104,"wght" 760}
.chan__val{font-size:1.02rem;font-variation-settings:"wdth" 100,"wght" 700;color:var(--sea-deep)}
.chan__item--wa .chan__val{color:var(--sun)}
.chan__item .btn{margin-top:auto}
.hours{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hours li{display:flex;justify-content:space-between;gap:14px;font-size:.9rem;
  padding-bottom:8px;border-bottom:1px dashed var(--line-soft)}
.hours li:last-child{border-bottom:0}
.hours b{font-variation-settings:"wdth" 98,"wght" 700}
.mapcard{background:var(--paper);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-s)}
.mapcard__top{height:150px;position:relative;
  background:linear-gradient(135deg,#0B3F4C 0%,#04707A 45%,#00B39B 100%)}
.mapcard__top svg{position:absolute;inset:0;width:100%;height:100%;opacity:.35}
.mapcard__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-60%);
  width:38px;height:38px;border-radius:50%;background:var(--hibiscus);display:grid;place-items:center;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.mapcard__body{padding:20px}
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:.93rem}
.checklist svg{flex:0 0 18px;margin-top:4px;color:var(--sea)}
.checklist b{font-variation-settings:"wdth" 100,"wght" 720}
@media (max-width:1000px){.chan{grid-template-columns:1fr}}

/* ==========================================================
   FOOTER LOGO INVERT
   The static HTML carried these two colours as inline style
   attributes on the footer logo. Moved here during the WP port
   so no template ships an inline style.
   ========================================================== */
.logo__txt--invert{color:var(--sand)}
.logo__txt--invert span{color:var(--sun)}

/* ==========================================================
   ACCESSIBILITY HELPERS
   Not present in the static HTML. The skip link is invisible
   until it takes keyboard focus, so the visual design is
   unchanged; screen-reader-text hides labels the design does
   not draw but assistive tech still needs.
   ========================================================== */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:12px;left:12px;z-index:999;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 18px;background:var(--ink);color:var(--sand);
  border-radius:var(--r-pill);font-size:.9rem;
  font-variation-settings:"wdth" 98,"wght" 700;box-shadow:var(--shadow-l)}

/* ==========================================================
   FOOTER GRID — track count follows the rendered columns
   The base rule reserves four link tracks. A column with no
   menu and no content is dropped by egx_footer_columns(),
   which would otherwise leave empty tracks and push the
   remaining columns off-centre. Four columns keep the base
   rule; fewer get a matching track count.
   ========================================================== */
@media (min-width:1001px){
  .ftr__grid[data-cols="3"]{grid-template-columns:1.4fr repeat(3,1fr)}
  .ftr__grid[data-cols="2"]{grid-template-columns:1.4fr repeat(2,1fr)}
  .ftr__grid[data-cols="1"]{grid-template-columns:1.4fr 1fr}
  .ftr__grid[data-cols="0"]{grid-template-columns:1fr}
}