/* ==========================================================================
   VALEA ALBĂ — enciclopedia raselor (/rase, /rase/{slug})
   Folosește tokenurile și componentele din style.css.
   ========================================================================== */

.ra-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Pagina A–Z ---------- */
.ra-stats{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:24px;font-size:.92rem;color:var(--muted-dark)}
.ra-stats b{color:var(--bone);font-weight:600;font-size:1.02rem}
.ra-az{padding-top:clamp(28px,4vw,48px)}

.ra-tools{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:10px;align-items:stretch}
.ra-search{position:relative;min-width:0}
.ra-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);
  fill:none;stroke:var(--muted-light);stroke-width:2;stroke-linecap:round;pointer-events:none}
.ra-search input{width:100%;height:100%;min-height:48px;padding:12px 14px 12px 42px;border:1px solid var(--line-l);
  background:var(--paper-2);border-radius:2px;font:inherit;font-size:.97rem;color:var(--pine)}
.ra-search input:focus,.ra-sel:focus{outline:none;border-color:var(--pine)}
.ra-sel{width:100%;min-width:0;min-height:48px;border:1px solid var(--line-l);background:var(--paper-2);border-radius:2px;
  padding:10px 12px;font:inherit;font-size:.93rem;color:var(--pine);cursor:pointer}

.ra-bar{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:14px}
.ra-check{padding:0}
.ra-bar .shop-count{margin-left:auto;margin-right:0}
.ra-reset{background:none;border:1px solid var(--line-l);border-radius:2px;padding:7px 12px;font-size:.86rem;cursor:pointer}
.ra-reset:hover{border-color:var(--pine);background:#fff}

.ra-letters{position:sticky;top:74px;z-index:20;display:flex;gap:2px;overflow-x:auto;
  margin:18px 0 0;padding:8px 0;background:var(--paper);border-top:1px solid var(--line-l);border-bottom:1px solid var(--line-l);
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.ra-letters a{flex:1 0 32px;min-width:32px;text-align:center;padding:6px 0;text-decoration:none;
  font-family:var(--fd);font-size:1.12rem;line-height:1.3;border-radius:2px;color:var(--pine)}
.ra-letters a:hover{background:var(--pine);color:var(--bone)}
.ra-letters a.off{color:rgba(19,34,24,.24);pointer-events:none;cursor:default}

.ra-group{scroll-margin-top:136px;padding-top:clamp(28px,3.5vw,40px)}
.ra-lh{display:flex;align-items:baseline;gap:14px;font-size:clamp(1.9rem,3vw,2.4rem);line-height:1;
  padding-bottom:12px;margin-bottom:20px;border-bottom:1px solid var(--line-l)}
.ra-lh small{font-family:var(--fs);font-size:.84rem;color:var(--muted-light);letter-spacing:0}
.ra-empty{margin-top:34px}
.ra-empty-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}

/* ---------- Cardul rasei ---------- */
.ra-card{position:relative}
.ra-card .card-pic{aspect-ratio:4/3.2}
.ra-card .ra-pic{width:100%;height:100%;object-fit:cover}
.ra-card .cname{display:block;margin:0;overflow-wrap:anywhere}
.ra-card-link{text-decoration:none;color:inherit}
.ra-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.ra-card:focus-within{border-color:var(--pine)}
.ra-card-link:focus-visible{outline:none}
.ra-badge-disp{z-index:2;text-decoration:none}
.ra-badge-disp:hover{background:#9BD083}
.ra-alias{font-size:.84rem;color:var(--muted-light);margin-top:-5px;line-height:1.4;overflow-wrap:anywhere}
.ra-card .card-breed{margin-top:0;font-size:.9rem}
.tag.ra-prov-proprie{border-color:rgba(132,190,108,.55);background:rgba(132,190,108,.13);color:#2F5A24}
.tag.ra-prov-ambele{border-color:rgba(199,155,69,.5);background:rgba(199,155,69,.12);color:#6E531C}

/* înlocuitor fără poză: inițiala rasei */
.ra-ph{display:grid;place-items:center;width:100%;height:100%;
  background:radial-gradient(120% 90% at 30% 20%,var(--pine-3),var(--pine) 75%)}
.ra-ph span{font-family:var(--fd);font-weight:300;font-size:clamp(3.4rem,6vw,4.6rem);line-height:1;color:var(--brass);opacity:.85}

/* ---------- Pagina rasei ---------- */
.ra-phero{padding:clamp(22px,3vw,30px) 0 clamp(20px,3vw,28px)}
.ra-phero .crumbs{margin:0}
.ra-hero-sect{padding-top:clamp(34px,5vw,64px)}
.ra-hero{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:start}
.ra-hero-pic{position:sticky;top:98px}
.ra-hero-img{display:block;width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:2px;background:var(--bone)}
.ra-hero-pic .ra-ph{display:grid;place-items:center;height:auto;aspect-ratio:4/3.3;border-radius:2px;
  background:radial-gradient(120% 90% at 30% 20%,var(--pine-3),var(--pine) 75%)}
.ra-hero-pic .ra-ph span{font-size:clamp(6rem,14vw,10rem)}
.ra-provb{display:inline-block;margin-bottom:14px;padding:5px 11px;border-radius:2px;font-size:.78rem;font-weight:600;
  letter-spacing:.03em;background:var(--bone);color:var(--pine);border:1px solid var(--line-l)}
.ra-provb-proprie{background:var(--sage);border-color:var(--sage);color:#0F2109}
.ra-provb-ambele{background:var(--brass);border-color:var(--brass);color:#1A1305}
.ra-hero-info h1{font-size:clamp(2.2rem,3.8vw,3.1rem);line-height:1.04;letter-spacing:-.02em;overflow-wrap:anywhere}
.ra-hero-alias{color:var(--muted-light);font-size:.95rem;margin-top:6px}
.ra-intro{margin:18px 0 0;font-size:1.04rem}
.ra-spec dd{overflow-wrap:anywhere}

.ra-rates{display:grid;gap:11px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-l)}
.ra-rate{display:grid;grid-template-columns:minmax(120px,160px) auto 1fr;align-items:center;gap:8px 16px;font-size:.93rem}
.ra-rate-l{color:var(--muted-light)}
.ra-dots{display:flex;gap:4px}
.ra-dots i{display:block;width:22px;height:8px;border-radius:1px;background:rgba(19,34,24,.12)}
.ra-dots i.on{background:var(--pine-3)}
.ra-rate-v{font-weight:500}
.ra-cta-note{font-size:.88rem;color:var(--muted-light);margin:12px 0 0;max-width:52ch}

.ra-motive{list-style:none;margin:0;padding:0;counter-reset:mot;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,56px)}
.ra-motive li{counter-increment:mot;display:flex;gap:18px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line-d);color:var(--bone)}
.ra-motive li::before{content:counter(mot);flex:0 0 1.3em;font-family:var(--fd);font-size:1.75rem;line-height:1;color:var(--brass)}

.ra-doc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.ra-doc-single{grid-template-columns:minmax(0,1fr)}
.ra-doc-single .ra-article{margin:0 auto}
.ra-toc{position:sticky;top:98px;font-size:.92rem}
.ra-toc h4{font-family:var(--fs);font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-light);margin-bottom:10px}
.ra-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line-l)}
.ra-toc a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;text-decoration:none;color:var(--muted-light);line-height:1.35}
.ra-toc a:hover,.ra-toc a[aria-current="true"]{color:var(--pine);border-left-color:var(--brass)}
.ra-article{margin:0;max-width:72ch;overflow-wrap:break-word}
.ra-article>:first-child{margin-top:0}
.ra-article h2,.ra-article h3{scroll-margin-top:98px}
.ra-article img{max-width:100%;height:auto}
.ra-article iframe,.ra-article video{max-width:100%}
.ra-article table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.3em;font-size:.95rem}
.ra-article th,.ra-article td{border:1px solid var(--line-l);padding:8px 12px;text-align:left;vertical-align:top}
.ra-article pre{max-width:100%;overflow-x:auto}

.ra-soon{max-width:780px;background:var(--paper-2);border:1px solid var(--line-l);border-left:3px solid var(--brass);
  padding:clamp(22px,3.4vw,36px);border-radius:2px}
.paper-2 .ra-soon{background:var(--paper)}
.ra-soon h2{font-size:clamp(1.45rem,2.5vw,1.9rem);margin-bottom:12px}
.ra-soon p{color:var(--muted-light);margin:0}
.ra-soon .dog-cta{margin-top:22px}
.ra-more{margin-top:clamp(24px,3vw,34px)}

/* meniul cu un element în plus: puțin mai strâns pe ecrane medii */
@media(min-width:721px) and (max-width:1240px){
  .nav{gap:16px}
  .nav a{font-size:.9rem}
  .hdr-in{gap:18px}
}
@media(min-width:721px) and (max-width:1000px){
  .hdr-tel span{display:none}
  .nav{gap:12px}
  .nav a{font-size:.86rem}
}

@media(max-width:1060px){
  .ra-tools{grid-template-columns:1fr 1fr 1fr}
  .ra-search{grid-column:1/-1}
  .ra-hero{grid-template-columns:1fr}
  .ra-hero-pic{position:static}
  .ra-doc{grid-template-columns:1fr}
  .ra-toc{position:static;background:var(--paper-2);border:1px solid var(--line-l);padding:16px 18px;border-radius:2px}
  .paper-2 .ra-toc{background:var(--paper)}
}
@media(max-width:720px){
  .ra-tools{grid-template-columns:1fr 1fr}
  .ra-tools .ra-sel:last-of-type{grid-column:1/-1}
  .ra-bar .shop-count{margin-left:0}
  .ra-grid{grid-template-columns:1fr 1fr;gap:12px}
  .ra-card .card-body{padding:12px 12px 14px;gap:6px}
  .ra-card .cname{font-size:1.08rem}
  .ra-card .card-breed{font-size:.8rem;line-height:1.35}
  .ra-card .tag{font-size:.72rem;padding:3px 7px}
  .ra-card .badge{top:8px;left:8px;padding:4px 8px;font-size:.7rem}
  .ra-card .ra-ph span{font-size:3rem}
  .ra-alias{font-size:.76rem}
  .ra-group{scroll-margin-top:128px}
  .ra-motive{grid-template-columns:1fr}
  .ra-rate{grid-template-columns:1fr auto}
  .ra-rate-v{grid-column:1/-1;margin-top:-6px;font-size:.86rem;color:var(--muted-light);font-weight:400}
  .ra-hero .dog-cta .btn{flex:1 1 100%;justify-content:center}
}
@media(max-width:340px){
  .ra-grid{grid-template-columns:1fr}
}