/* piano-collection-250.css - Responsive modern shell for Garofalo Piano
   Extends pom.css (#211d1e, #000, #67522c #846837 #b6952a #a8a8a8)
   Covers cellphone vertical/horizontal, laptop, large monitor */

@import url('pom.css');

/* Reset box model for this page */
* { box-sizing: border-box; }

/* Override fixed 790px wrap -> fluid responsive */
#wrap {
  width: 95% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
}

/* Make all images responsive */
#wrap img, .hero img, .collection-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Close 2-3 inch gap at top - tighten header/hero spacing for this page */
.with-collection #header { height:auto !important; padding:8px 0 0 0 !important; margin:0 !important; }
.with-collection #header br { display:none !important; }
.with-collection #header h1 { margin:0 0 2px 0 !important; }
.with-collection #header p { margin:0 0 8px 0 !important; height:auto !important; }
.with-collection img[src="images/header.jpg"] { margin:0 !important; display:block; }
.with-collection #avmenu { margin-top:0 !important; padding-top:0 !important; }
.with-collection .hero { margin:0 0 14px 0 !important; }
.with-collection #footer {
  width: 100% !important;
  max-width: 1160px !important;
  margin: 0 auto !important;
  background: #211d1e !important;
  background-image: none !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 18px 12px !important;
  clear: both !important;
}

/* Hero */
.hero {
  margin: 0 0 18px 0;
  background: #000;
  border: 1px solid #2a2520;
}
.hero img {
  width: 100%;
  height: auto;
}
.hero-caption {
  text-align: center;
  color: #846837;
  font-size: 0.75em;
  letter-spacing: 1px;
  padding: 6px 10px 10px;
  background: #000;
}

/* Welcome lead */
.lead {
  background: #0a0a0a;
  border: 1px solid #2a2520;
  border-left: 4px solid #67522c;
  padding: 18px 20px;
  margin: 0 0 22px 0;
  color: #d6d6d6;
  line-height: 1.7;
  font-size: 1.02em;
}
.lead em {
  color:#fffff1;
  background:#67522c;
  padding:2px 6px;
  font-style:normal;
  font-weight:bold;
  border-radius:3px;
  border:1px solid #846837;
  font-size:0.92em;
  white-space:nowrap;
}
.lead strong { color:#b6952a; }

/* Collection sub-nav - beige copper like #avmenu */
.collection-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px 0;
  padding: 10px;
  background: #0f0f0f;
  border: 1px solid #2a2520;
  position: sticky;
  top: 0;
  z-index: 10;
}
.collection-nav a {
  flex: 1 1 auto;
  min-width: 140px;
  text-align: center;
  text-decoration: none;
  color: #fffff1;
  background: #67522c;
  border-left: 1px solid #846837;
  padding: 10px 8px;
  font-weight: bold;
  font-size: 0.88em;
  line-height: 1.2;
  border-radius: 2px;
  transition: background 0.15s, border-left-width 0.15s;
}
.collection-nav a:hover {
  background: #5a4a28;
  border-left: 4px solid #47381e;
  text-decoration: none;
  color: #fff;
}
.collection-nav a.home {
  flex: 0 0 68px;
  min-width: 68px;
  font-size: 1.1em;
}
.collection-nav a small { display:block; font-weight:normal; font-size:0.82em; color:#f0e6c8; margin-top:2px; }

/* Content overrides for this page - single column centered, but keep extras/avmenu hidden on this page? Keep them but make responsive */
#content.collection-content {
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  padding: 0 12px 30px 12px !important;
}
.collection-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 10px 0 0 0;
}
.collection-card {
  background: #0a0a0a;
  border: 1px solid #2a2520;
  border-top: 3px solid #67522c;
  padding: 0;
  overflow: hidden;
}
.collection-card .card-head {
  padding: 16px 18px 8px;
  border-bottom: 1px solid #1a1a1a;
}
.collection-card h3 {
  margin: 0;
  color: #fffff1;
  font-size: 1.35em;
  line-height: 1.25;
  letter-spacing: 0.3px;
}
.collection-card h3 span { color:#b6952a; font-weight:normal; font-size:0.82em; }
.collection-card .card-body {
  padding: 14px 18px 18px;
  color: #a8a8a8;
  line-height: 1.6;
  font-size: 0.95em;
}
.collection-card .placeholder {
  background: #151110;
  border: 1px dashed #4a3f2a;
  color: #846837;
  text-align: center;
  padding: 28px 16px;
  font-style: italic;
  letter-spacing: 0.5px;
  margin: 0 18px 18px;
  border-radius: 4px;
}
.collection-card .meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.collection-card .meta span {
  background:#211d1e;
  border:1px solid #3a3120;
  color:#b6952a;
  font-size:0.78em;
  padding:4px 8px;
  border-radius:10px;
}

/* Make original columns stack responsively on this page - hide classic sidebars if we use full-width content */
@media (min-width: 981px) {
  #avmenu, #extras { display:block; }
  /* keep classic left/right but collection-content will span correctly when we hide them via layout */
  .with-collection #avmenu,
  .with-collection #extras { display:none; }
  .with-collection #content.collection-content { margin: 0 !important; }
}

/* Tablet & phone - stack everything */
@media (max-width: 980px) {
  #wrap { width: 96% !important; }
  #avmenu { float:none; width:auto; margin:0 0 12px 0; }
  #avmenu ul { width:auto; display:flex; flex-wrap:wrap; gap:4px; }
  #avmenu li { flex:1 1 auto; margin-bottom:0; }
  #avmenu li a { padding:8px 10px; height:auto; }
  .announce { width:auto; }
  #extras { float:none; width:auto; margin:12px 0 0 0; }
  #content { margin:0 !important; }
  .collection-nav a { min-width: 42%; }
  .collection-nav a.home { min-width: 100%; }
}
@media (max-width: 900px) {
  .top-callout { flex-direction: column; }
  .top-callout .hero.sticker img { clip-path: none; -webkit-clip-path: none; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
  .two-panel { flex-direction: column; }
  .two-panel .right-panel { border-left: none !important; border-top: 1px solid #2a2520; }
}
@media (max-width: 640px) {
  #header { height:auto; padding:10px 10px 12px; }
  #header h1 { font-size:1.6em; }
  #header p { float:none; width:auto; text-align:left; height:auto; margin-top:6px; }
  .lead { font-size:0.96em; padding:14px 14px; }
  .collection-nav { position: static; }
  .collection-nav a { min-width:100%; }
  .collection-card h3 { font-size:1.15em; }
  /* Cell phone: 1pt / 2pt smaller per your list */
  .cell-1pt { font-size:13pt !important; }
  .cell-2pt { font-size:12pt !important; }
  .cell-1pt strong, .cell-1pt em, .cell-2pt strong, .cell-2pt em { font-size:inherit !important; }
  /* CELL PHONE ONLY: images before paragraphs */
  #content.collection-content { display:flex; flex-direction:column; }
  .collection-nav { order:1; }
  .lead-first { order:3; }
  .top-callout { order:2; display:contents; }
  .top-callout .hero { order:2; }
  .top-callout .lead-second { order:4; }
  .collection-grid { order:5; }
  #content.collection-content > p:last-of-type { order:6; } /* orange “Each piano includes” stays at bottom */
  .collection-card { display:flex; flex-direction:column; }
  .collection-card .card-head { order:1; }
  .collection-card .card-body { order:2; }
  .collection-card .two-panel { order:3; display:contents; }
  .collection-card .two-panel .left-panel { order:2; }
  .collection-card .two-panel .right-panel { order:1; margin-bottom:12px; border-left:none !important; border-bottom:1px solid #2a2520; }
  .collection-card .placeholder { order:3; }
  /* Footer: auto height on phone, not 244px dark box */
  #footer { height:auto !important; min-height:0 !important; padding:18px 12px !important; background: #211d1e !important; }
}
@media (max-width: 380px) {
  .collection-nav a small { display:inline; margin-left:6px; }
}
/* Landscape phone: compact nav, not full-screen */
@media (max-width: 900px) and (orientation: landscape) {
  .collection-nav { position: static !important; max-height: none !important; padding: 6px !important; gap: 4px !important; }
  .collection-nav a { min-width: 0 !important; flex: 1 1 18% !important; padding: 6px 4px !important; font-size: 0.72em !important; line-height: 1.1 !important; }
  .collection-nav a small { display: inline !important; margin-left: 3px !important; font-size: 0.85em !important; }
  .collection-nav a.home { flex: 0 1 10% !important; min-width: 40px !important; }
}

/* Remove fancy background from New Rocco Collection - just bold */
.lead strong { color: inherit !important; background: none !important; border: none !important; padding: 0 !important; font-weight: bold !important; font-size: inherit !important; box-shadow: none !important; }
.lead em { background: none !important; border: none !important; box-shadow: none !important; color: inherit !important; }

/* Lead 14pt as requested - both paragraphs */
.lead-first, .lead-second { font-size:14pt !important; line-height:1.7 !important; }
.lead-first p, .lead-second p { font-size:14pt !important; line-height:1.7 !important; }

/* Top callout - text as caption left, sticker image right */
.top-callout { display:flex; gap:24px; align-items:center; margin:0 0 22px 0; }
.top-callout .lead { flex:1; margin:0 !important; }
.top-callout .hero { flex:1; margin:0 !important; }
.top-callout .hero.expanded { flex:1.5 !important; }
.top-callout .hero.sticker { background: transparent !important; border: none !important; padding:0 !important; }
.top-callout .hero.sticker img {
  clip-path: inset(18px 18px 18px 18px round 14px);
  -webkit-clip-path: inset(18px 18px 18px 18px round 14px);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.top-callout .hero.sticker .hero-caption { background: transparent !important; border: none !important; padding: 8px 0 0 0 !important; }

/* Accessibility: smooth scroll for anchor jumps, offset for sticky nav */
html { scroll-behavior: smooth; scroll-padding-top: 64px; }

/* Print */
@media print {
  .collection-nav { display:none; }
  #wrap { width:100% !important; border:none; }
}