/* =========================================================
   Jogja Art Studio — Custom Styles (Bootstrap 5)
   File: css/style.css
   ========================================================= */

/* Base */
:root{
  --jas-bg: #f6f6f6;
  --jas-text: #111111;
  --jas-muted: #6c757d;
  --jas-soft: rgba(0,0,0,.06);
  --jas-card-shadow: 0 10px 30px rgba(0,0,0,.08);
  --jas-card-shadow-hover: 0 14px 34px rgba(0,0,0,.12);
}

html, body{
  height: 100%;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--jas-text);
  background: #ffffff;
}

a{
  text-decoration: none;
}

.muted{
  color: var(--jas-muted);
}

/* Buttons (small polish) */
.btn{
  border-radius: 14px;
  font-weight: 600;
}

.btn-sm{
  border-radius: 12px;
}

/* Navbar */
.navbar{
  background: #fff;
}

.navbar .navbar-brand{
  letter-spacing: .2px;
}

.navbar .nav-link{
  font-weight: 500;
}

.navbar .nav-link.active{
  font-weight: 700;
}

/* Sections */
.section{
  padding: 72px 0;
}

.section-sm{
  padding: 40px 0;
}

/* Hero (for index.html) */
.hero{
  min-height: 76vh;
  display: grid;
  place-items: center;
  color: #fff;
  position: relative;
  background:
    linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.20)),
    url("../img/hero.jpg") center/cover no-repeat;
}

/* If you don't have hero.jpg yet, hero will still show gradient */
.hero .badge{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
}

.hero h1{
  letter-spacing: -.3px;
}

/* Feature blocks */
.feature{
  background: var(--jas-bg);
  border-radius: 18px;
  padding: 18px;
  height: 100%;
}

/* Gallery header strip */
.gallery-header{
  background: var(--jas-bg);
  border-bottom: 1px solid var(--jas-soft);
}

/* Artwork cards */
.art-card{
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--jas-card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
}

.art-card:hover{
  transform: translateY(-3px);
  box-shadow: var(--jas-card-shadow-hover);
}

/* Artwork images */
.art-img{
  width: 100%;
  height: 260px;          /* fallback that works everywhere */
  object-fit: cover;
  background: var(--jas-bg);
}

/* Modern browsers: keep consistent ratio */
@supports (aspect-ratio: 4 / 3){
  .art-img{
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* Small text helpers */
.small-muted{
  font-size: .92rem;
  color: var(--jas-muted);
}

/* Badges used in cards */
.badge.text-bg-dark{
  border-radius: 999px;
  padding: .45rem .7rem;
  font-weight: 600;
}

/* Modal polish */
.modal-content{
  border: 0;
}

.modal-header{
  border-bottom: 1px solid var(--jas-soft);
}

.modal-body{
  background: #fff;
}

.modal-body img{
  background: var(--jas-bg);
}

/* Footer */
footer{
  background: #fff;
}

.footer-line{
  border-top: 1px solid var(--jas-soft);
}

/* Forms */
.form-select, .form-control{
  border-radius: 14px;
  padding: .7rem .9rem;
}

/* Utilities */
.shadow-soft{
  box-shadow: var(--jas-card-shadow);
}

.rounded-4{
  border-radius: 18px !important;
}

/* Responsive tweaks */
@media (max-width: 768px){
  .section{ padding: 56px 0; }
  .hero{ min-height: 70vh; }
  .art-img{ height: 240px; }
}