/* ==================================================
   allpaintings.css (CLEAN FULL FILE)
   - Removed duplicate/conflicting rules (gap-nav, card-info hover duplicate, nested @media)
   - Kept working parts for: oilpaintings.php + acrylicpaintings.php + digitalpaintings.php + showArtist.php
   - Mobile touch: panels show ONLY when .touch-show is added (oil: .card-info, artist works: .card-info1)
   - Mobile: oil buttons stack (Info above Buy) without width:100%
   - Mobile: bigger photos
   - Artist modal: lift card-info1 above actions on mobile
================================================== */

/* ==================================================
   BASE
================================================== */
body{
  background-color:#38060b !important;
  color:#fff;
  font-family:"Century Gothic", Arial, sans-serif;
}

/* ==================================================
   NAV
================================================== */
.gap-nav{
  gap: clamp(12px, 2vw, 44px);
}

.navlink-custom{
  color: #A8892C !important;
  font-weight: 500;
  letter-spacing: clamp(1px, 0.6vw, 7px);
  padding: 8px 0 !important;
  margin: 0 !important;
  white-space: nowrap;
  transition: color .25s ease;
}

.navlink-custom:hover,
.navlink-custom:focus{
  color: #000 !important;
}

.dropdown-menu-darkish{
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.dropdown-menu-darkish .dropdown-item{
  color:#fff;
  font-family:"Century Gothic", Arial, sans-serif;
  letter-spacing: 2px;
}

.dropdown-menu-darkish .dropdown-item:hover{
  background: rgba(255,255,255,0.14);
}

/* Mobile nav dropdown */
@media (max-width: 991.98px){
  .navbar .dropdown-menu{
    background-color: #38060b !important;
    color: white !important;
  }

  .dropdown-menu-darkish .dropdown-item{
    color:#fff !important;
    font-family:"Century Gothic", Arial, sans-serif;
    letter-spacing: 2px;
    text-align: center;
  }
}

/* ==================================================
   TOP LAYOUT
================================================== */
.section{
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand-logo{
  width: clamp(160px, 70vw, 450px);
  height: auto;
  display: block;
  margin-inline: auto;
}

.intro-text{
  max-width: 900px;
  font-size: 14px !important;
  line-height: 1.4;
  color: #ffffff;
  text-align: justify !important;
  hyphens: auto;
}

h1{
  letter-spacing: 4px;
}

/* ==================================================
   LANGUAGE SWITCH
================================================== */
.lang-container{
  width: 100%;
  padding-top: 16px;
}

.lang-inner{
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.lang-btn{
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  transition: background 0.2s ease;
}

.lang-btn img{
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-btn:hover{
  background: rgba(255,255,255,0.18);
}

@media (max-width: 992px){
  .lang-inner{
    width: 90%;
    justify-content: center !important;
  }
}

/* Center nav links on mobile when collapsed */
@media (max-width: 992px){
  .navbar-nav{
    width: 100%;
    text-align: center;
    align-items: center !important;
    color: #fff !important;
  }
  .navbar-nav .nav-item{
    width: 100%;
    color: #fff !important;
  }
}

/* ==================================================
   CONTAINERS
================================================== */
.cont85{
  width: 60% !important;
  margin-inline: auto;
}

.cont84{
  width: 60% !important;
  margin-inline: auto;
}

@media (min-width: 1000px) and (max-width: 1600px){
  .cont85{ width: 80% !important; }
  .cont84{ width: 80% !important; }
}

@media (max-width: 576px){
  .cont84{ width: 95% !important; }
}

/* ==================================================
   GALLERY CARDS (OIL/ACRYLIC/DIGITAL)
================================================== */
.gallery-card{
  position: relative;
  background: #ffffff !important;
  border: none;
  overflow: hidden;
  padding-bottom: 50px; /* base room (overridden later for actions) */
}

.img-wrapper{
  width: 100%;
  height: 450px;
  overflow: hidden;
  background-color: #ffffff!important;
  padding-left: 20px;
  padding-right: 20px;
}

.gallery-card img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .4s ease, filter .4s ease;
  cursor: pointer;
  padding-top: 50px;
}

.gallery-card:hover img{
  transform: scale(1.05);
  filter: brightness(.7);
}

/* Slide-up info panel (oil/acrylic/digital) */
.card-info{
  position: absolute;
  bottom: -30%;
  left: 0;
  width: 100%;
  height: 30%;
  background: rgba(0,0,0,.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: bottom .35s ease;
  text-align: center;
}

/* Desktop hover reveal */
.gallery-card:hover .card-info{
  bottom: 50px;
}

/* Card text */
.painting-title,
.painting-price{
  font-family:"Century Gothic", Arial, sans-serif;
  color:#fff;
  font-size: 16px;
  margin: 4px 0;
  letter-spacing: 2px;
}

/* Legacy buy button (used in places that don't have .card-actions) */
.buy-btn{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color:#950101 !important;
  color: white !important;
  border-radius: 0px !important;
}

.buy-btn:hover{
  background-color: #cb020c!important;
  color: white !important;
}

/* ==================================================
   SHOW ARTIST (ARTIST CARDS)
================================================== */
.gallery-cardartist{
  position: relative;
  background: #ffffff !important;
  border: none;
  overflow: hidden;
  padding-bottom: 30px;
  padding-top: 10px;
}

.img-wrapperartist{
  width: 100%;
  height: 480px;
  overflow: hidden;
  background-color: #ffffff!important;
  padding-left: 20px;
  padding-right: 20px;
}

.gallery-cardartist img{
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  transition: transform .4s ease, filter .4s ease;
  cursor: pointer;
}

.gallery-cardartist:hover img{
  transform: scale(1.05);
  filter: brightness(.7);
}

/* ==================================================
   SHOW ARTIST (WORKS INSIDE MODAL)
================================================== */
.gallery-cardartpics img{
  width: 100%;
  object-fit: contain;
  transition: transform .4s ease, filter .4s ease;
  cursor: pointer;
  padding-top: 0px !important;
}

.img-wrapperartpics{
  width: 100%;
  height: 300px;
  overflow: hidden;
  background-color: #ffffff!important;
  padding-top: 0px;
}

/* Info panel inside artist modal work cards */
.card-info1{
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 50%;
  background: rgba(0,0,0,.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: bottom .35s ease;
  text-align: center;
}

/* Desktop hover reveal for artist works */
.gallery-cardartpics:hover .card-info1{
  bottom: 0px !important;
}

/* ==================================================
   MODAL IMAGE
================================================== */
.modal-img{
  width: 100%;
  height: auto;
  filter: brightness(.9) contrast(1.1);
}

/* ==================================================
   RESPONSIVE TEXT + NAV LOOK
================================================== */
@media (max-width: 900px){
  .intro-text{
    font-size: 10px !important;
    padding-left: 50px;
    padding-right: 50px;
    word-spacing: 2px;
  }

  .modal-img{ max-height: 500px; }

  .navlink-custom{
    letter-spacing: 2px;
    color: #fff !important;
  }

  .cont85{ width: 95% !important; }
  .cont84{ width: 95% !important; }
}

/* ==================================================
   MOBILE TOUCH: panels show ONLY with .touch-show
   (NO nested @media, no duplicates)
================================================== */
@media (hover: none) and (pointer: coarse){

  /* oil/acrylic/digital */
  .gallery-card .card-info{
    bottom: -50% !important;
    pointer-events: none;
  }
  .gallery-card.touch-show .card-info{
    bottom: 50px !important;
    pointer-events: auto;
  }

  /* artist modal work cards */
  .gallery-cardartpics .card-info1{
    bottom: -50% !important;
    pointer-events: none;
  }
  .gallery-cardartpics.touch-show .card-info1{
    bottom: 0 !important;
    pointer-events: auto;
  }
}

/* ==================================================
   OIL/ACRYLIC/DIGITAL ACTIONS (Info + Buy)
================================================== */

/* ensure enough room for actions */
.gallery-card{
  padding-bottom: 80px;
}

/* actions wrapper */
.gallery-card .card-actions{
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 6;
}

/* Buy inside actions MUST be static (kills old absolute behavior) */
.gallery-card .card-actions .buy-btn{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.gallery-card .card-actions .buy-btn:hover,
.gallery-card .card-actions .buy-btn:focus{
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Info button */
.gallery-card .card-actions .info-btn{
  background: rgba(0,0,0,0.75) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  border-radius: 999px !important;
  height: 44px;
  min-width: 44px;
  padding: 0 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1;
}

.gallery-card .card-actions .info-btn i{
  font-size: 18px;
  line-height: 1;
}

.gallery-card .card-actions .info-btn .info-text{
  display: none;
  font-family:"Century Gothic", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1;
}

/* MOBILE: stack actions + show text + lift card-info higher */
@media (max-width: 991.98px){

  .gallery-card{
    padding-bottom: 120px !important;
  }

  .gallery-card .card-actions{
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
  }

  .gallery-card .card-actions .info-btn .info-text{
    display: inline !important;
  }

  /* don't force full width */
  .gallery-card .card-actions .info-btn,
  .gallery-card .card-actions .buy-btn{
    width: auto !important;
  }

  /* lift oil info panel above stacked buttons */
  .gallery-card.touch-show .card-info{
    bottom: 150px !important;
  }
}

/* also lift for hover-capable small screens */
@media (max-width: 991.98px) and (hover: hover){
  .gallery-card:hover .card-info{
    bottom: 150px !important;
  }
}

/* ==================================================
   MOBILE: make photos bigger (oil/acrylic/digital)
================================================== */
@media (max-width: 900px){
  .img-wrapper{
    height: 320px !important;
  }
  .gallery-card img{
    padding-top: 18px !important;
  }
}

@media (max-width: 576px){
  .img-wrapper{
    height: 360px !important;
  }
}

/* ==================================================
   ARTIST MODAL WORK CARDS:
   lift card-info1 above actions on mobile (if you added actions there)
================================================== */
@media (max-width: 991.98px){
  .gallery-cardartpics{
    padding-bottom: 120px !important;
  }

  .gallery-cardartpics.touch-show .card-info1{
    bottom: 120px !important;
  }
}
/* =========================================
   FIX: stop sticky hover on mobile for card-info1
   (showArtist modal work cards)
========================================= */
@media (hover: none) and (pointer: coarse){
  /* kill desktop hover behavior on touch screens */
  .gallery-cardartpics:hover .card-info1{
    bottom: -50% !important;
  }

  /* only show when JS toggles .touch-show */
  .gallery-cardartpics.touch-show .card-info1{
    bottom: 120px !important;
  }
}