/*
 Theme Name:   Pakistan Currency Museum
 Description:  Child theme of Artist Art Gallery for the Pakistan Currency Museum. Catalog grid, single item pages and era filters for banknotes and coins.
 Author:       Pakistan Currency Museum
 Template:     artist-art-gallery
 Version:      1.0.0
 Text Domain:  pakistan-currency-museum
*/

/* ---------- Era filter chips ---------- */
.pcm-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 10px 0 25px; }
.pcm-chip {
  padding: 7px 16px; border: 1px solid #cbd5e1; border-radius: 999px;
  font-size: 0.85rem; color: #334155; text-decoration: none !important; background: #fff;
  transition: background .2s, color .2s;
}
.pcm-chip:hover, .pcm-chip.is-active { background: #166534; border-color: #166534; color: #fff; }

/* ---------- Catalog grid ---------- */
.rb-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; margin: 30px 0; }
.rb-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none !important; display: flex; flex-direction: column;
}
.rb-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.rb-card-img-wrap { width: 100%; height: 155px; background: #0f172a; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rb-card-img { width: 100%; height: 100%; object-fit: cover; }
.rb-placeholder {
  width: 100%; height: 100%; min-height: 150px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: #94a3b8; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.rb-placeholder svg { width: 34px; height: 34px; stroke: #38bdf8; opacity: .85; }
.rb-card-body { padding: 14px; display: flex; flex-direction: column; flex-grow: 1; }
.rb-card-code { font-size: .72rem; font-weight: 700; color: #059669; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.rb-card-title { font-size: .98rem; font-weight: 600; color: #1e293b; margin: 0 0 6px; line-height: 1.35; }
.rb-card-meta { font-size: .82rem; color: #64748b; margin-top: auto; }

/* ---------- Single item ---------- */
.pcm-viewer { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin: 20px 0 35px; }
.pcm-side { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; text-align: center; }
.pcm-side h4 { margin: 0 0 10px; color: #475569; font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; }
.pcm-side img { max-width: 100%; height: auto; border-radius: 4px; }
.pcm-side .rb-placeholder { height: 190px; border-radius: 4px; }
.pcm-ref { color: #059669; font-weight: 700; text-transform: uppercase; font-size: .85rem; letter-spacing: .05em; }

.rb-specs-table { width: 100%; border-collapse: collapse; margin: 25px 0; font-size: .95rem; }
.rb-specs-table th, .rb-specs-table td { padding: 10px 14px; border: 1px solid #e2e8f0; text-align: left; }
.rb-specs-table th { background: #f8fafc; width: 28%; font-weight: 600; color: #334155; }

/* ---------- Brand colours (taken from the PCM logo) ---------- */
:root { --pcm-green: #0b5a2a; --pcm-dark: #1e2e27; --pcm-gold: #b8892a; --pcm-cream: #fbf8ef; }

/* ---------- Header logo ---------- */
.wp-block-site-title a { display: inline-flex !important; align-items: center; gap: 12px; }
.wp-block-site-title .pcm-logo { height: 46px; width: auto; display: block; flex: 0 0 auto; }
@media (max-width: 600px) { .wp-block-site-title .pcm-logo { height: 36px; } }

/* ---------- Homepage sections (RealBanknotes-style layout) ---------- */
.pcm-hero { background: linear-gradient(rgba(30,46,39,.84), rgba(30,46,39,.84)), var(--pcm-img-hero, linear-gradient(#1e2e27,#1e2e27)); background-size: cover; background-position: center; }
.pcm-hero h1, .pcm-hero p { color: var(--pcm-cream); }
.pcm-hero .pcm-kicker { color: #e2b858; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; font-weight: 700; }
.pcm-btn-gold .wp-block-button__link { background: var(--pcm-gold); color: #fff; border-radius: 6px; }
.pcm-btn-ghost .wp-block-button__link { background: transparent; color: var(--pcm-cream); border: 1px solid rgba(251,248,239,.5); border-radius: 6px; }

.pcm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 0; }
.pcm-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px 14px; text-align: center; }
.pcm-stat strong { display: block; font-size: 2rem; color: var(--pcm-green); line-height: 1.1; }
.pcm-stat span { font-size: .8rem; color: #64748b; text-transform: uppercase; letter-spacing: .06em; }

.pcm-eras { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 20px 0; }
.pcm-era {
  display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 8px;
  background: var(--pcm-green); color: #fff !important; text-decoration: none !important;
  border-left: 5px solid var(--pcm-gold); transition: transform .2s ease, box-shadow .2s ease;
}
.pcm-era:hover { transform: translateY(-3px); box-shadow: 0 8px 16px rgba(0,0,0,.18); }
.pcm-era span { font-weight: 600; }
.pcm-era em { font-style: normal; font-size: .8rem; opacity: .8; }
.pcm-section-title { text-align: center; }
.pcm-section-sub { text-align: center; color: #64748b; }
.rb-card-code, .pcm-ref { color: var(--pcm-green); }

/* ---------- Search and contact forms ---------- */
.pcm-search { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 25px; }
.pcm-search input[type=search] { flex: 1 1 260px; }
.pcm-search input, .pcm-search select, .pcm-contact input, .pcm-contact textarea {
  padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 6px; font: inherit; background: #fff; max-width: 100%;
}
.pcm-contact { max-width: 560px; }
.pcm-contact input, .pcm-contact textarea { width: 100%; box-sizing: border-box; }
.pcm-search button, .pcm-contact button {
  padding: 10px 22px; border: 0; border-radius: 6px; background: var(--pcm-green); color: #fff; font: inherit; cursor: pointer;
}
.pcm-search button:hover, .pcm-contact button:hover { background: #09491f; }
.pcm-notice { padding: 12px 14px; border-radius: 6px; background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pcm-notice.pcm-error { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

/* ---------- Explore tiles and about band ---------- */
.pcm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.pcm-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 22px;
  border-radius: 10px; overflow: hidden; color: #fff !important; text-decoration: none !important;
  background: linear-gradient(to top, rgba(11,40,22,.88), rgba(11,40,22,.25)), var(--pcm-tile-img, linear-gradient(135deg, #0b5a2a, #1e2e27));
  background-size: cover; background-position: center; transition: transform .2s ease, box-shadow .2s ease;
}
.pcm-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.2); }
.pcm-tile-label { font-size: 1.4rem; font-weight: 700; }
.pcm-tile em { font-style: normal; font-size: .85rem; opacity: .85; }
.pcm-tile-banknotes { --pcm-tile-img: var(--pcm-img-banknotes, linear-gradient(135deg, #0b5a2a, #1e2e27)); }
.pcm-tile-coins { --pcm-tile-img: var(--pcm-img-coins, linear-gradient(135deg, #8a6a1f, #1e2e27)); }
.pcm-tile-eras { --pcm-tile-img: var(--pcm-img-eras, linear-gradient(135deg, #1e2e27, #0b5a2a)); }
.pcm-about { background: linear-gradient(rgba(251,248,239,.93), rgba(251,248,239,.93)), var(--pcm-img-about, linear-gradient(#fbf8ef,#fbf8ef)); background-size: cover; background-position: center; }