:root{
  --bg: #fff;
  --accent: #004080; /* blue theme */
  --muted: #444;
  --gutter: 24px;
  font-family: "Poppins", Arial, sans-serif;
  color:var(--muted);
}

/* wrapper to center a spread */
.booklet-wrapper{ max-width:1100px; margin:18px auto; padding:12px; }

/* Spread layout: two pages side-by-side */
.spread{ display:flex; gap:var(--gutter); align-items:stretch; }

/* each page */
.page{
  flex:1 1 50%;
  background:#fff;
  border:1px solid #e6e6e6;
  padding:18px;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  box-sizing:border-box;
  min-height:680px;
  position:relative;
}

/* page header */
.page-head{ display:flex; gap:12px; align-items:center; }
.page-head .logo{ width:60px; height:auto; }
.page-head h1{ margin:0; color:var(--accent); font-size:1.15rem; }
.page-head .sub{ margin:0; font-size:0.85rem; color:#666; }

/* hero photo on left is an img element */
.hero-photo{ margin:12px 0; }
.shared-photo{ width:100%; height:200px; object-fit:cover; border-radius:6px; }

/* right page shows same image as background to avoid second img tag */
/* Ensure cover.jpg exists in same folder or change URL below */
.hero-photo-bg {
  margin: 12px 0;
  height: 200px;
  border-radius: 6px;
  background-image: url('images/building.jpg'); /* yahan same image ka naam likhiye */
  background-size: cover;
  background-position: center;
}


/* typography */
h2{ color:var(--accent); margin-top:8px; }
h3{ margin-bottom:6px; color:#333; }
p{ line-height:1.45; font-size:0.95rem; text-align: justify; /* bothsides justified */ }

/* Responsive: stack pages on small screens */
@media (max-width:900px){
  .spread{ flex-direction:column; }
  .page{ min-height: auto; }
}

/* Print rules - friendly to A4 */
@media print{
  body{ background:white; }
  .no-print{ display:none !important; }

  .booklet-wrapper{ width:100%; max-width:100%; padding:0; margin:0;}
  .spread{ display:block; } /* stack for printing */
  .page{ box-shadow:none; margin:0; border:none; padding:16mm; page-break-after:always; min-height: auto; }
  .hero-photo, .hero-photo-bg{ height:100px; }
  @page { size: A4; margin: 10mm; }
}
/* --- print-only helper --- */
/* hide the print <img> on screen */
.print-only-photo { display: none; }

/* For print: hide background container and show print-only image */
@media print {
  .hero-photo-bg { display: none !important; }        /* hide CSS background in print */
  .print-only-photo {
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px;
    margin: 12px 0;
  }
}