/* ================================================
   PRINTIGLY CONTENT PAGES — Responsive & Layout Fixes
   Overrides inline styles on service, corporate gifting,
   about, and clients pages.
   Version: 1.0.0
   ================================================ */

/* --- CSS Custom Properties --- */
:root {
  --pg-blue: #0b1f66;
  --pg-blue-mid: #1242b0;
  --pg-blue-light: #0a66c2;
  --pg-navy: #1a237e;
  --pg-navy-light: #0d47a1;
  --pg-orange: #ff6f00;
  --pg-whatsapp: #25D366;
  --pg-text: #334155;
  --pg-text-light: #4a5568;
  --pg-text-muted: #5e6a7a;
  --pg-border: #e5e7eb;
  --pg-bg-light: #f6f9ff;
  --pg-radius: 12px;
}

/* --- Base fixes --- */
.site-main section,
.site-main article,
.site-main div {
  box-sizing: border-box;
}

/* --- Table Responsive Fix --- */
.site-main table {
  min-width: 0 !important;
  width: 100% !important;
}

.site-main div[style*="overflow-x"] {
  -webkit-overflow-scrolling: touch;
}

/* --- Image safety --- */
.site-main img {
  max-width: 100%;
  height: auto;
}

/* --- Button hover states --- */
.site-main a[style*="background:#25D366"],
.site-main a[style*="background: #25d366"] {
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.site-main a[style*="background:#25D366"]:hover,
.site-main a[style*="background: #25d366"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.site-main a[style*="background:rgba(255,255,255"],
.site-main a[style*="background: #fff"] {
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.site-main a[style*="background:rgba(255,255,255"]:hover,
.site-main a[style*="background: #fff"]:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.site-main a[style*="background: #ff6f00"],
.site-main a[style*="background:#ff6f00"] {
  transition: opacity 0.2s ease, transform 0.15s ease;
}
.site-main a[style*="background: #ff6f00"]:hover,
.site-main a[style*="background:#ff6f00"]:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* --- Card hover states --- */
.site-main div[style*="border: 2px solid #e0e0e0"],
.site-main div[style*="border:2px solid #e0e0e0"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.site-main div[style*="border: 2px solid #e0e0e0"]:hover,
.site-main div[style*="border:2px solid #e0e0e0"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* --- FAQ details open styling --- */
.site-main details[open] summary {
  margin-bottom: 4px;
}

/* ================================================
   TABLET — max 991px
   ================================================ */
@media (max-width: 991px) {
  /* Reduce hero padding */
  .site-main > section[style*="padding:56px"],
  .site-main > section[style*="padding: 56px"],
  .site-main > div > div[style*="padding: 60px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* CTA sections */
  .site-main > section[style*="padding:40px"],
  .site-main > section[style*="padding: 50px"],
  .site-main > div > div[style*="padding: 50px"] {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  /* Corporate gifting process: tighter */
  .corporate-gifting-main div[style*="display: flex"][style*="justify-content: center"] {
    gap: 8px !important;
  }

  .corporate-gifting-main div[style*="width: 160px"],
  .corporate-gifting-main div[style*="width:160px"] {
    width: 130px !important;
  }
}

/* ================================================
   MOBILE — max 575px
   ================================================ */
@media (max-width: 575px) {

  /* --- Hero sections --- */
  .site-main > section[style*="padding:56px"],
  .site-main > section[style*="padding: 56px"] {
    padding: 32px 16px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
  }

  /* Corporate hero */
  .site-main > div > div[style*="padding: 60px 20px"],
  .corporate-gifting-main > div[style*="padding: 60px"] {
    padding: 32px 16px !important;
    margin-bottom: 24px !important;
  }

  /* Hero heading — cap large font sizes */
  .site-main > section[style*="padding:56px"] h1,
  .site-main > section[style*="padding: 56px"] h1,
  .site-main > div > div[style*="padding: 60px"] h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  /* Corporate h1 sizes */
  .corporate-gifting-main h1[style*="font-size: 2.4em"],
  .corporate-gifting-apparel h1[style*="font-size: 2.4em"],
  .corporate-gifting-awards h1[style*="font-size: 2.4em"],
  .corporate-gifting-merchandise h1[style*="font-size: 2.4em"],
  .corporate-gifting-hampers h1[style*="font-size: 2.4em"] {
    font-size: 1.6em !important;
  }

  /* Hero subtitle */
  .site-main > section[style*="padding:56px"] > p[style*="font-size:17px"],
  .site-main > section[style*="padding: 56px"] > p[style*="font-size: 1.2em"],
  .corporate-gifting-main > div > p[style*="font-size: 1.2em"] {
    font-size: 15px !important;
  }

  /* CTA section */
  .site-main > section[style*="padding:40px 20px"] {
    padding: 28px 16px !important;
    border-radius: 12px !important;
  }

  .site-main > section[style*="padding:40px"] h2,
  .site-main > div > div[style*="padding: 50px"] h2 {
    font-size: 22px !important;
  }

  /* Corporate CTA */
  .corporate-gifting-main > div[style*="padding: 50px"],
  .corporate-gifting-apparel > div[style*="padding: 50px"],
  .corporate-gifting-awards > div[style*="padding: 50px"],
  .corporate-gifting-merchandise > div[style*="padding: 50px"],
  .corporate-gifting-hampers > div[style*="padding: 50px"] {
    padding: 28px 16px !important;
  }

  /* --- Stat badge row — 2 columns --- */
  .site-main > section[style*="grid-template-columns:repeat(auto-fit,minmax(170px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  /* --- Product/card grids — single column --- */
  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(250px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(260px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(240px"],
  .site-main ul[style*="grid-template-columns:repeat(auto-fit,minmax(260px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Corporate grids */
  .corporate-gifting-main div[style*="grid-template-columns: repeat(auto-fit, minmax(220px"],
  .corporate-gifting-main div[style*="grid-template-columns: repeat(auto-fit, minmax(240px"],
  .corporate-gifting-main div[style*="grid-template-columns: repeat(auto-fit, minmax(250px"],
  .corporate-gifting-apparel div[style*="grid-template-columns: repeat(auto-fit"],
  .corporate-gifting-awards div[style*="grid-template-columns: repeat(auto-fit"],
  .corporate-gifting-merchandise div[style*="grid-template-columns: repeat(auto-fit"],
  .corporate-gifting-hampers div[style*="grid-template-columns: repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Pricing tier grid — 2 columns */
  .corporate-gifting-main div[style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Image grids */
  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(220px"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Story section grid */
  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(180px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  /* --- Table fix: remove min-width --- */
  .site-main table[style*="min-width:620px"],
  .site-main table[style*="min-width: 620px"] {
    min-width: 0 !important;
    font-size: 14px;
  }

  .site-main table th,
  .site-main table td {
    padding: 8px 6px !important;
  }

  /* Corporate tables */
  .corporate-gifting-apparel table,
  .corporate-gifting-awards table,
  .corporate-gifting-hampers table,
  .corporate-gifting-merchandise table {
    font-size: 14px;
  }

  /* --- Process steps: stack vertically --- */
  .corporate-gifting-main div[style*="display: flex"][style*="justify-content: center"][style*="gap: 10px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Process step boxes — full width */
  .corporate-gifting-main div[style*="width: 160px"],
  .corporate-gifting-main div[style*="width:160px"] {
    width: 100% !important;
    max-width: 280px !important;
  }

  /* Arrow separators → down arrows */
  .corporate-gifting-main div[style*="font-size: 2em"][style*="align-self: center"] {
    transform: rotate(90deg);
    font-size: 1.5em !important;
    margin: 4px 0;
  }

  /* --- Multi-column lists → single column --- */
  .corporate-gifting-hampers ul[style*="columns: 2"],
  .corporate-gifting-apparel ul[style*="columns: 2"],
  .site-main ul[style*="columns:2"],
  .site-main ul[style*="columns: 2"] {
    columns: 1 !important;
  }

  /* --- Brands row --- */
  .site-main div[style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:10px"],
  .corporate-gifting-main div[style*="display: flex"][style*="flex-wrap: wrap"][style*="gap: 30px"] {
    gap: 8px !important;
    padding: 16px !important;
  }

  .corporate-gifting-main div[style*="padding: 15px 25px"] {
    padding: 10px 16px !important;
    font-size: 0.95em !important;
  }

  /* --- Section margins --- */
  .site-main > section[style*="margin-bottom:34px"],
  .site-main > section[style*="margin-bottom:36px"],
  .site-main > section[style*="margin-bottom:38px"] {
    margin-bottom: 24px !important;
  }

  .corporate-gifting-main h2,
  .corporate-gifting-apparel h2,
  .corporate-gifting-awards h2,
  .corporate-gifting-merchandise h2,
  .corporate-gifting-hampers h2 {
    font-size: 1.4em !important;
    margin-bottom: 12px !important;
  }

  /* Corporate section bottom margin */
  .corporate-gifting-main div[style*="margin-bottom: 50px"],
  .corporate-gifting-apparel div[style*="margin-bottom: 50px"],
  .corporate-gifting-awards div[style*="margin-bottom: 50px"],
  .corporate-gifting-merchandise div[style*="margin-bottom: 50px"],
  .corporate-gifting-hampers div[style*="margin-bottom: 50px"] {
    margin-bottom: 28px !important;
  }

  /* Pricing tier text */
  .corporate-gifting-main p[style*="font-size: 2em"] {
    font-size: 1.4em !important;
  }

  /* --- Clients page --- */
  .clients-hero {
    padding: 40px 16px !important;
  }

  .clients-hero h1 {
    font-size: 1.8rem !important;
  }

  .site-main section.stats {
    padding: 28px 16px !important;
  }

  .site-main section.stats div[style*="font-size:3rem"] {
    font-size: 2rem !important;
  }

  /* Client logo grid */
  .site-main section.client-logos div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Industries grid */
  .site-main section.industries div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Case studies grid */
  .site-main section.case-studies div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* CTA section */
  .site-main section.cta {
    padding: 32px 16px !important;
  }

  .site-main section.cta h2 {
    font-size: 1.6rem !important;
  }

  /* Button flex — stack on mobile */
  .site-main div[style*="display:flex"][style*="gap:12px"],
  .site-main div[style*="display: flex"][style*="gap: 12px"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .site-main div[style*="display:flex"][style*="gap:12px"] a,
  .site-main div[style*="display: flex"][style*="gap: 12px"] a {
    width: 100%;
    max-width: 300px;
    text-align: center;
    display: block !important;
  }

  /* FAQ items padding */
  .site-main details {
    padding: 10px 12px !important;
  }

  /* Footer note */
  .site-main > p[style*="font-size: 0.9em"],
  .site-main > div > p[style*="font-size: 0.9em"] {
    font-size: 0.8em !important;
    padding: 0 12px;
  }
}

/* ================================================
   VERY SMALL — max 375px (iPhone SE)
   ================================================ */
@media (max-width: 375px) {
  .site-main > section[style*="padding:56px"] h1,
  .site-main > div > div[style*="padding: 60px"] h1 {
    font-size: 22px !important;
  }

  .site-main > section[style*="grid-template-columns:repeat(auto-fit,minmax(170px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  .site-main div[style*="grid-template-columns:repeat(auto-fit,minmax(180px"] {
    grid-template-columns: 1fr !important;
  }

  .corporate-gifting-main div[style*="grid-template-columns: repeat(auto-fit, minmax(180px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================
   SERVICE PAGE TEMPLATES — Mobile Overrides
   Targets the 5 service page templates:
   digital-printing, offset-printing, large-format,
   packaging, stationery
   ================================================ */

/* --- Service hero: padding:60px 40px --- */
@media (max-width: 575px) {
  .site-main div[style*="padding:60px 40px"] {
    padding: 32px 16px !important;
  }

  /* Hero h1 font size */
  .site-main div[style*="padding:60px 40px"] h1 {
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
  }

  /* Hero badge pills — wrap tighter */
  .site-main div[style*="padding:60px 40px"] > div[style*="display:flex"] {
    gap: 8px !important;
    margin-top: 12px !important;
  }

  /* Service CTA blocks: padding:44px and padding:48px 40px */
  .site-main div[style*="padding:44px"],
  .site-main div[style*="padding:48px 40px"] {
    padding: 28px 16px !important;
  }

  /* Background sections with padding:40px (advantages, materials) */
  .site-main div[style*="background:#f5f5ff"][style*="padding:40px"],
  .site-main div[style*="background:#fce4ec"][style*="padding:32px"],
  .site-main div[style*="background:#fce4ec"][style*="padding:28px"] {
    padding: 24px 14px !important;
  }

  /* auto-fill grids — single column on mobile */
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(280px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(260px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(240px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* auto-fill smaller grids — 2 columns on mobile */
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(220px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* ================================================
   VERY SMALL — max 375px
   ================================================ */
@media (max-width: 375px) {
  .site-main div[style*="padding:60px 40px"] h1 {
    font-size: 1.4rem !important;
  }

  /* Force 2-col grids to 1-col on tiny screens */
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(220px"],
  .site-main div[style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
}