/* CONSTANT / premium photography-first country cards, v2 (2026-11-11).
   All photography is country-specific. Provenance in each photo folder.
   Flags are small cues only; images should dominate the entire tile. */
#countries{scroll-margin-top:calc(var(--header-height,74px) + 20px)}
#countryGrid.country-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
#countryGrid.country-grid .country{
  position:relative;isolation:isolate;min-width:0;height:265px;overflow:hidden;
  border:1px solid rgba(193,162,111,.28);border-radius:9px;
  background:#112017;box-shadow:0 14px 34px rgba(0,0,0,.22);
  text-align:left;transform:translateY(0);
  transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
}
#countryGrid .country img.country-side-photo{
  display:block;position:absolute;inset:0;z-index:0;
  width:100%;height:100%;max-width:none;
  opacity:1;object-fit:cover;object-position:center center;
  filter:saturate(.82) contrast(1.04) brightness(.84);
  transform:scale(1);
  transition:transform .65s cubic-bezier(.2,.75,.25,1),filter .65s ease;
}
#countryGrid .country img.country-flag-photo{
  display:block;position:absolute;top:16px;left:17px;right:auto;bottom:auto;
  inset:16px auto auto 17px;z-index:4;width:43px;height:29px;
  max-width:none;object-fit:cover;object-position:center;
  opacity:1;transform:none;filter:none;
  -webkit-mask-image:none;mask-image:none;
  border:1px solid rgba(255,255,255,.55);border-radius:5px;
  box-shadow:0 5px 14px rgba(0,0,0,.30);background:#0a1711;
  transition:border-color .3s ease,transform .3s ease;
}
#countryGrid .country .country-fade{
  position:absolute;inset:0;left:0;right:0;top:0;bottom:0;
  display:block;z-index:1;max-width:none;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,9,6,.12) 0%,rgba(2,9,6,.04) 30%,rgba(2,9,6,.17) 51%,rgba(1,9,6,.84) 88%,rgba(1,9,6,.96) 100%);
}
#countryGrid .country:after{display:none}
#countryGrid .country .country-name,
#countryGrid .country[data-country="Доминиканская Республика"] .country-name{
  position:absolute;display:block;top:auto;bottom:21px;left:20px;right:68px;
  max-width:calc(100% - 88px);margin:0;
  z-index:3;color:#f4eee3;text-shadow:0 3px 14px rgba(0,0,0,.62);
  font:400 25px/1.08 var(--serif);letter-spacing:-.025em;
  text-wrap:balance;overflow-wrap:normal;
}
#countryGrid .country[data-country="Доминиканская Республика"] .country-name{
  font-size:22px;line-height:1.08;
}
#countryGrid .country:before{
  content:'→';position:absolute;z-index:4;top:auto;bottom:16px;left:auto;right:16px;
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(211,181,130,.57);border-radius:50%;
  background:rgba(4,16,10,.64);color:#f1e7d7;
  font:400 23px/1 var(--sans);text-shadow:none;
  transition:background .22s,border-color .22s,transform .3s;
}
#countryGrid .country:hover{
  transform:translateY(-4px);border-color:rgba(220,185,132,.74);
  box-shadow:0 22px 42px rgba(0,0,0,.33);
}
#countryGrid .country:hover img.country-side-photo{
  transform:scale(1.055);filter:saturate(.95) contrast(1.05) brightness(.96);
}
#countryGrid .country:hover img.country-flag-photo{transform:none}
#countryGrid .country:hover:before{
  transform:translateX(2px);background:rgba(194,159,106,.19);
  border-color:#d0af77;
}
#countryGrid .country:focus-visible{outline:2px solid #d6b47d;outline-offset:3px}
#countryGrid .country.country-no-photo img.country-flag-photo{
  width:44px;height:29px;border-radius:4px;
}
@media(max-width:1200px){
 #countryGrid.country-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #countryGrid.country-grid .country{height:270px}
 #countryGrid .country .country-name{font-size:30px}
 #countryGrid .country[data-country="Доминиканская Республика"] .country-name{font-size:26px}
}
@media(max-width:560px){
 #countryGrid.country-grid{grid-template-columns:1fr;gap:14px}
 #countryGrid.country-grid .country{height:230px;border-radius:8px}
 #countryGrid .country .country-name{left:19px;bottom:20px;font-size:28px}
 #countryGrid .country[data-country="Доминиканская Республика"] .country-name{
  font-size:24px;max-width:calc(100% - 88px)}
 #countryGrid .country:before{width:35px;height:35px;bottom:16px;right:15px}
 #countryGrid .country img.country-flag-photo{top:15px;left:16px}
}
@media(prefers-reduced-motion:reduce){
 #countryGrid.country-grid .country,
 #countryGrid .country img,
 #countryGrid .country:before{transition:none}
}