/* /public_html/assets/css/giddo-decor.css
   RomanianGuide — accente decorative din setul ex-* (transparente), pe fundal alb.
   Doar CSS, fără atingerea markup-ului: înlocuiește iconițele „pătrat navy" cu props
   transparente și adaugă decor discret. Asset-urile sunt deja în /assets/img/.
   Căile sunt relative la /assets/css/ -> ../img/.. */

/* ============================================================
   1. ÎNLOCUIRE ICONIȚE NAVY-TILE CU PROPS TRANSPARENTE
   content:url() schimbă imaginea randată fără a modifica <img src>
   (suportat în Chrome / Firefox / Safari). Toate au height:auto în
   giddo.css, deci nu se distorsionează la alt raport de aspect.
   ============================================================ */
.hero-compass{ content: url("../img/ex-compass-open.png"); }     /* busolă deschisă în spatele hero-ului */
.routes-deco{ display:none; }                                     /* ascuns: ilustrația se revărsa peste carduri */
.mapband-deco{ content: url("../img/ex-treasure-map.png"); }      /* hartă pliată la banda „See on the map" */
.side-giddo img{ content: url("../img/ex-compass-open.png"); width:72px; } /* card „Build my trip" */

/* ============================================================
   2. FOOTER — frunză-divider sus + siluetă de munți discretă în colț
   ============================================================ */
.foot{ position:relative; }
.foot::before{
  content:""; display:block;
  width:220px; height:26px; margin:0 auto 28px;
  background:url("../img/ex-divider-leaf.png") center/contain no-repeat;
  opacity:.85;
}
.foot::after{
  content:""; position:absolute; right:0; bottom:0;
  width:360px; height:160px; max-width:42%;
  background:url("../img/ex-mountain.png") right bottom/contain no-repeat;
  opacity:.06; pointer-events:none; z-index:0;
}
.foot .wrap{ position:relative; z-index:1; }

/* ============================================================
   3. STĂRI GOALE — binoclu deasupra textului
   (.empty-note apare la liste fără rezultate și la /plan fără potriviri)
   ============================================================ */
.empty-note{ text-align:center; }
.empty-note::before{
  content:""; display:block; width:64px; height:58px; margin:2px auto 14px;
  background:url("../img/ex-binoculars-wood.png") center/contain no-repeat;
  opacity:.9;
}

/* ============================================================
   4. UTILITARE REUTILIZABILE — pune-le manual unde vrei (retușuri)
   Ex: <span class="gd-leaf"></span> între două secțiuni.
   ============================================================ */
.gd-leaf{
  display:block; width:220px; height:26px; margin:34px auto;
  background:url("../img/ex-divider-leaf.png") center/contain no-repeat;
}
.gd-rule{
  display:block; width:300px; height:12px; margin:30px auto; opacity:.8;
  background:url("../img/ex-divider-line.png") center/contain no-repeat;
}
.gd-prop{ display:inline-block; vertical-align:middle; }
.gd-prop.compass{ width:40px; height:40px; background:url("../img/ex-compass-pocket.png") center/contain no-repeat; }
.gd-prop.pin{ width:26px; height:34px; background:url("../img/ex-pin-orange.png") center/contain no-repeat; }
.gd-prop.boots{ width:46px; height:40px; background:url("../img/ex-boots.png") center/contain no-repeat; }
.gd-prop.lantern{ width:34px; height:46px; background:url("../img/ex-lantern.png") center/contain no-repeat; }
.gd-prop.campfire{ width:48px; height:44px; background:url("../img/ex-campfire.png") center/contain no-repeat; }
.gd-prop.mug{ width:42px; height:38px; background:url("../img/ex-mug.png") center/contain no-repeat; }

/* ============================================================
   5. PASSPORT BLOCK — badge paw+check în colț (tematic: ștampilă/check)
   Țintă: <div class="passport reveal"> din page-home.php (linia ~218)
   ============================================================ */
.passport{ position:relative; }
.passport::after{
  content:""; position:absolute; right:-12px; top:-28px;
  width:120px; height:120px; pointer-events:none; z-index:2;
  background:url("../img/badge-paw-check.png") center/contain no-repeat;
  transform:rotate(8deg);
  /* fără drop-shadow — crea dreptunghi vizibil pe PNG-uri cu bg non-transparent */
}
@media (max-width:560px){
  .passport::after{ width:64px; height:64px; right:-6px; top:-28px; transform:rotate(10deg); }
}
@media (max-width:900px){
  .passport::after{ display:none; }
}

/* ============================================================
   6. BUILD MY TRIP — busolă deschisă pe stânga (decor tematic pentru
   „planificare rută"). Imagine confirmat-transparentă (ex-compass-open.png).
   Țintă: <section class="sec" id="build"> din page-home.php (linia ~167)
   Pe mobil dispare (n-are loc).
   ============================================================ */
#build{ position:relative; overflow:hidden; }
#build::after{
  content:""; position:absolute; left:30px; bottom:30px;
  width:260px; height:260px; pointer-events:none; z-index:0;
  background:url("../img/ex-compass-open.png") left bottom/contain no-repeat;
  opacity:.18;
}
#build .wrap{ position:relative; z-index:1; }
@media (max-width:1100px){
  #build::after{ width:220px; height:220px; opacity:.15; }
}
@media (max-width:900px){
  #build::after{ width:170px; height:170px; left:10px; bottom:10px; opacity:.12; }
}
@media (max-width:700px){
  #build::after{ display:none; }
}

/* ============================================================
   7. MAP CTA — silhouete de munți Carpați jos, sub textul portocaliu
   Țintă: <div class="mapband"> din <section id="map"> (linia ~253)
   ============================================================ */
.mapband{ position:relative; overflow:hidden; }
.mapband::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:170px; pointer-events:none; z-index:0;
  background:url("../img/ex-mountain.png") center bottom/auto 100% no-repeat;
  opacity:.10;
}
.mapband > *{ position:relative; z-index:1; }
@media (max-width:900px){
  .mapband::after{ height:120px; opacity:.08; }
}
@media (max-width:560px){
  .mapband::after{ height:70px; opacity:.06; }
}

/* ============================================================
   8. /routes — drum punctat + busolă jos, după carduri, ca închidere
   vizuală a paginii (umple golul dintre ultimul card și footer).
   Țintă: <section class="sec routes-sec list-top"> din page-routes.php
   ============================================================ */
.routes-sec{ position:relative; }
.routes-sec::after{
  content:"";
  display:block;
  width:min(560px, 85%);
  height:180px;
  margin:72px auto 28px;
  background:url("../img/route-dotted-compass.png") center/contain no-repeat;
  opacity:.55;
  /* fără drop-shadow — crea dreptunghi vizibil */
}
@media (max-width:900px){
  .routes-sec::after{ width:min(440px, 90%); height:130px; margin:50px auto 18px; opacity:.50; }
}
@media (max-width:900px){
  .routes-sec::after{ display:none; }
}
@media (max-width:560px){
  .routes-sec::after{ height:90px; margin:40px auto 12px; opacity:.45; }
}