/* ASILA AG site styles: hover effects following the Mednic template, then the responsive layer.
   Inline styles set the resting look, so hover rules use !important.
   Colours are matched in both the written form (#8B5E3C) and the browser form (rgb(139, 94, 60)). */

/* Smooth changes everywhere */
a, button {
  transition: background-color .3s ease, background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease, opacity .3s ease;
}
a img, button img {
  transition: transform .6s ease, filter .6s ease;
}
a svg, button svg, a span[aria-hidden="true"], button span[aria-hidden="true"] {
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}

/* 1. Plain text links turn bronze, as Mednic links turn to the brand colour */
a:not([style*="background"]):hover {
  color: #8B5E3C !important;
}
/* Links written in white on dark sections turn light bronze */
a[style*="color: #FFFFFF" i]:not([style*="background"]):hover,
a[style*="color: rgb(255, 255, 255)"]:not([style*="background"]):hover,
a[style*="color: rgba(255, 255, 255" i]:not([style*="background"]):hover {
  color: #D9B48F !important;
}

/* 2. Main menu: a 3px bar appears under the item and the text stays white */
header nav a[href][style]:hover {
  color: #FFFFFF !important;
  box-shadow: inset 0 -3px 0 #FFFFFF !important;
}
/* Header icon links (Notebook, Account, Bag) get a soft panel */
header a[aria-label]:not([aria-label*="entrance" i]):hover {
  color: #FFFFFF !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}
/* Header logo keeps its colour, as in Mednic */
header a[aria-label*="entrance" i]:hover {
  color: #FFFFFF !important;
}

/* 3. Filled bronze buttons and links darken to deep brown */
a[style*="background: #8B5E3C" i]:hover,
a[style*="background: rgb(139, 94, 60)"]:hover,
button:not(:disabled)[style*="background: #8B5E3C" i]:hover,
button:not(:disabled)[style*="background: rgb(139, 94, 60)"]:hover {
  background: #2B1E15 !important;
  color: #FFFFFF !important;
}

/* 4. Black buttons and links turn bronze */
a[style*="background: #000000" i]:hover,
a[style*="background: rgb(0, 0, 0)"]:hover,
button:not(:disabled)[style*="background: #000000" i]:hover,
button:not(:disabled)[style*="background: rgb(0, 0, 0)"]:hover {
  background: #8B5E3C !important;
  color: #FFFFFF !important;
}

/* 5. White buttons and links (including Enter Exhibition in the header) turn bronze with white text */
a[style*="background: #FFFFFF" i]:not(:has(img)):hover,
a[style*="background: rgb(255, 255, 255)"]:not(:has(img)):hover,
a[style*="background: rgba(255, 255, 255, 0.95)"]:hover,
button:not(:disabled)[style*="background: #FFFFFF" i]:hover,
button:not(:disabled)[style*="background: rgb(255, 255, 255)"]:hover {
  background: #8B5E3C !important;
  color: #FFFFFF !important;
  border-color: #8B5E3C !important;
}
/* Outline buttons (white with a black border) fill black instead */
a[style*="background: #FFFFFF" i][style*="solid #000000" i]:hover,
a[style*="background: rgb(255, 255, 255)"][style*="solid rgb(0, 0, 0)"]:hover,
button:not(:disabled)[style*="background: #FFFFFF" i][style*="solid #000000" i]:hover,
button:not(:disabled)[style*="background: rgb(255, 255, 255)"][style*="solid rgb(0, 0, 0)"]:hover,
a:not([style*="background"])[style*="border: 1px solid #000000" i]:hover,
a:not([style*="background"])[style*="border: 1px solid rgb(0, 0, 0)"]:hover {
  background: #000000 !important;
  color: #FFFFFF !important;
  border-color: #000000 !important;
}
/* Outline links on dark sections fill white */
a[style*="background: transparent"][style*="solid #FFFFFF" i]:hover,
a[style*="background: transparent"][style*="solid rgb(255, 255, 255)"]:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
}
/* Light grey bordered links firm up their border */
a[style*="solid rgba(0, 0, 0, 0.3)"]:hover {
  border-color: #000000 !important;
}

/* 6. Light panels and tinted panels deepen */
a[style*="background: #F0EEEB" i]:hover,
a[style*="background: rgb(240, 238, 235)"]:hover,
button:not(:disabled)[style*="background: #F0EEEB" i]:hover,
button:not(:disabled)[style*="background: rgb(240, 238, 235)"]:hover,
button:not(:disabled)[style*="background: #F7F6F4" i]:hover,
button:not(:disabled)[style*="background: rgb(247, 246, 244)"]:hover {
  background: #E4DED6 !important;
}
a[style*="background: rgba(139, 94, 60, 0.6)"]:hover,
a[style*="background: rgba(139, 94, 60, 0.85)"]:hover {
  background: rgba(139, 94, 60, 1) !important;
}
a[style*="background: rgba(255, 255, 255, 0.06)"]:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* 7. Transparent buttons (rows, tabs, questions, filters) take a bronze tint */
button:not(:disabled)[style*="background: transparent"]:hover {
  background: rgba(139, 94, 60, 0.12) !important;
}

/* 8. Cards with a light border lift with a shadow */
a[style*="#DEDEDE" i]:hover,
a[style*="rgb(222, 222, 222)"]:hover,
a:has(img)[style*="background: #FFFFFF" i]:hover,
a:has(img)[style*="background: rgb(255, 255, 255)"]:hover {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10) !important;
}

/* 9. Images inside links zoom gently and darken slightly, as Mednic image cards do */
a:has(> img),
a :has(> img) {
  overflow: hidden;
}
a:hover img {
  transform: scale(1.05);
  filter: brightness(0.92);
}

/* 10. Round arrow badges fill bronze and turn */
a:hover span[aria-hidden="true"][style*="border-radius: 50%"] {
  background: #8B5E3C !important;
  color: #FFFFFF !important;
  transform: rotate(45deg);
}

/* 11. Trailing arrows nudge right and back, as Mednic arrows do */
@keyframes asilaNudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
a:hover > span[aria-hidden="true"]:last-child:not([style*="position: absolute"]):not([style*="border-radius: 50%"]),
a:hover span[aria-hidden="true"]:last-child:not([style*="position"]):not([style*="border-radius"]):not([style*="display: inline-flex; width"]),
button:not(:disabled):hover > span[aria-hidden="true"]:last-child:not([style*="position: absolute"]) {
  animation: asilaNudge .7s ease-in-out 1;
}

/* 12. Icons in feature links zoom, as Mednic icon boxes do */
a:not(header a):hover svg {
  transform: scale(1.15);
}

/* ==========================================================
   Responsive layer: phones, tablets, small laptops, large screens
   ========================================================== */

/* Headers: links fold into a menu below laptop width */
.hdr-burger { display: none !important; }
.hdr-mob { display: none !important; }
@media (max-width: 1180px) {
  .site-hdr { flex-wrap: nowrap !important; }
  .site-hdr > div { flex-wrap: nowrap !important; }
  .hdr-burger { display: flex !important; }
  .hdr-nav { display: none !important; }
  .hdr-nav.is-open {
    display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 1000;
    overflow-y: auto; background: #2B1E15; padding: 8px 0 24px;
  }
  .hdr-nav.is-open a {
    min-height: 56px !important; padding: 0 clamp(20px, 5vw, 40px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none !important; font-size: 17px !important;
  }
  .hdr-nav.is-open a[aria-current="page"] { color: #D9B48F !important; }
}
@media (max-width: 640px) {
  .hdr-ic, .hdr-cta { display: none !important; }
  .hdr-nav.is-open .hdr-mob { display: flex !important; }
  .hdr-logo { padding: 0 18px !important; }
}

/* Home page heroes: always one screen tall, contents scale to fit */
.hero { display: flex; flex-direction: column; height: max(300px, min(100svh, 860px)); min-height: 0 !important; }
.hero > .hero-inner { flex: 1 1 auto; width: 100%; min-height: 0 !important; }
.hero-top { padding-top: clamp(20px, 7vh, 140px) !important; }
.hero h1 { font-size: clamp(34px, min(6vw, 8.5vh), 84px) !important; }
@media (max-width: 1100px) {
  .hero-strip { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-card { grid-column: 1 / -1; max-width: none !important; min-height: 120px !important; }
  .hero-card img { flex: 0 0 120px !important; width: 120px !important; height: auto !important; }
  .hero-tile { min-height: 110px !important; padding: 20px !important; }
}
@media (max-width: 700px) {
  .hero-card, .hero-emblem { display: none !important; }
  .hero-top { gap: 16px !important; }
  .hero-tile { min-height: 92px !important; padding: 14px 12px !important; gap: 10px !important; }
  .hero-tile svg { width: 26px; height: 26px; }
  .hero-tile span { font-size: 13px !important; line-height: 1.3; }
  .hero p { font-size: 17px !important; }
}
@media (max-height: 760px) and (min-width: 1101px) {
  .hero-card, .hero-tile { min-height: 120px !important; }
  .hero-card img { height: 120px !important; }
  .hero-tile { padding: 22px !important; }
}

@media (max-width: 1100px) and (max-height: 760px) {
  .hero-card, .hero-emblem { display: none !important; }
}
@media (max-height: 520px) {
  .hero-strip, .hero-emblem { display: none !important; }
  .hero-top { padding-top: 16px !important; }
  .hero p { margin-top: 8px !important; font-size: 16px !important; }
  .hero h1 { font-size: clamp(28px, min(5vw, 9vh), 40px) !important; }
}

/* Scale diagrams on the artwork pages shrink to fit a phone */
@media (max-width: 700px) { .fit-600 { zoom: 0.8; } .fit-640 { zoom: 0.75; } }
@media (max-width: 540px) { .fit-600 { zoom: 0.5; } .fit-640 { zoom: 0.46; } }

/* Photo bands with stacked link rows: shorter rows on phones */
@media (max-width: 700px) {
  a[style*="min-height: 110px"], button[style*="min-height: 110px"] {
    min-height: 72px !important; padding-left: 20px !important; padding-right: 20px !important; font-size: 17px !important; gap: 14px !important;
  }
  a[style*="min-height: 110px"] svg, button[style*="min-height: 110px"] svg { width: 26px; height: 26px; }
}

/* Artwork pages: the viewer stays on screen while the purchase options scroll */
@media (min-width: 1101px) and (min-height: 700px) {
  .sticky-view { position: sticky; top: 12px; align-self: flex-start; }
}