/* Fancy modern stylesheet for index.html
   - Responsive grid-based layout
   - Clean typography and accessible color contrasts
   - Banner, cards, carousel, tabs, buttons, images
   - Simple carousel fallbacks (no JS required for layout)
*/

:root{
  --bg:#eef3ff;
  --card:#ffffff;
  --muted:#4b5563;
  --accent:#062c9b; /* deeper blue */
  --accent-2:#ff4d4f; /* vivid coral */
  --border:rgba(6,44,155,0.18);
  --glass:rgba(255,255,255,0.7);
  --max-width:1200px;
  --radius:14px;
  --thick-border:2.5px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg),#eef2ff);
  color:#111827;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.wrapper{
  max-width:var(--max-width);
  margin:36px auto;
  padding:24px;
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}

/* Sections behave like cards */
.section{
  background:linear-gradient(180deg, var(--card), #fbfdff);
  border:var(--thick-border) solid var(--border);
  padding:22px 24px;
  border-radius:var(--radius);
  box-shadow: 0 18px 40px rgba(6,44,155,0.09), 0 6px 12px rgba(2,6,23,0.03);
}

.section.banner{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 32px;
  text-align:center;
  background:linear-gradient(90deg, var(--accent), #0f6efd 60%);
  color:white;
  border-bottom:calc(var(--thick-border) * 1.5) solid rgba(255,255,255,0.12);
}

.section.banner h1{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 32px;
  text-align:center;
  background:linear-gradient(90deg, var(--accent), #0f6efd 60%);
  color:white;
  border-bottom:calc(var(--thick-border) * 1.5) solid rgba(255,255,255,0.12);
  min-height:220px;
  gap:16px;
  flex-wrap:wrap;
}

/* Compact top grid (two book buttons) */
.section.grid{
  display:flex;
  gap:10px;
  align-items:center;
  padding:6px 4px;
  background:transparent;
  border:none;
  box-shadow:none;
  flex-wrap:wrap; /* allow wrapping on very small screens */
}

.section.grid .section.button{flex:0 0 auto;margin:0}

/* Make the top grid itself look like a single card and remove nested .section styling */
.section.grid{
  background:linear-gradient(180deg,var(--card),#fbfdff);
  border:calc(var(--thick-border) * 0.6) solid rgba(6,44,155,0.06);
  padding:10px;
  border-radius:12px;
  box-shadow: 0 12px 30px rgba(6,44,155,0.06);
}

/* Prevent inner .section (buttons) from getting the generic .section card chrome */
.section.grid .section{background:transparent;border:none;padding:0;box-shadow:none}
.section.grid .section.button{min-height:48px;padding:0}
.section.grid .section.button a{display:inline-block}

.section.button{
  flex:1 1 180px; /* narrower buttons */
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px; /* reduced height */
  padding:4px;
}

.section.button a{
  display:inline-block;
  padding:10px 12px; /* compact CTA */
  background:linear-gradient(180deg,var(--accent), #0730c9);
  color:white;
  border-radius:8px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:0.2px;
  box-shadow: 0 8px 22px rgba(6,44,155,0.14);
  border:2px solid rgba(255,255,255,0.06);
  font-size:14px;
}

.section.bar{background:transparent;border:none;padding:0}

.section.bar p{margin:10px 0;padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(250,250,255,0.96));border-radius:10px;border-left:calc(var(--thick-border) * 1.2) solid var(--accent);}

.section.photos.carousel{
  padding:12px;
}

/* Carousel layout */
.carousel{overflow:hidden;border-radius:12px;border:calc(var(--thick-border) * 0.6) solid rgba(6,44,155,0.06);background:linear-gradient(180deg,#fbfdff,#f8fbff)}
.carousel-deck{display:flex;gap:18px;padding:10px;flex-wrap:wrap}
.carousel-slide{min-width:340px;flex:1 0 340px;padding:18px;background:linear-gradient(180deg,#ffffff,#fbfdff);border-radius:12px;border:1px solid rgba(6,44,155,0.05)}

.leftleft{width:46%;height:auto;border-radius:10px;float:left;margin-right:14px;box-shadow:0 18px 40px rgba(2,6,23,0.08)}
.rightright{display:block;margin:0;font-size:16px;color:var(--muted);padding-top:4px}
.rightrightright.buttontab{display:inline-block;margin-top:12px;padding:10px 14px;background:var(--accent-2);color:white;border-radius:10px;text-decoration:none;font-weight:700}

/* Portrait and other images */
.portrait{width:100%;max-width:240px;border-radius:10px}
.portrait.edited{max-width:360px}

.section.divider{padding:10px;text-align:center;background:transparent;border-top:calc(var(--thick-border) * 0.6) dashed rgba(6,44,155,0.07)}
.section.divider h2{margin:10px 0;color:#071a4d;font-weight:700}

/* Tone down the top quotes block (first .section.bar) */
.wrapper > .section.bar:first-of-type{
  padding:8px 6px;
  font-size:14px;
}
.wrapper > .section.bar:first-of-type p{
  margin:6px 0;
  padding:8px 10px;
  background:rgba(255,255,255,0.95);
  border-radius:8px;
  border-left:6px solid rgba(6,44,155,0.06);
}

/* Product-style introduction: large image on the left, text on the right */
.section.introduction{
  padding:20px 22px;
  background:linear-gradient(180deg,#ffffff,#fbfdff);
  border:calc(var(--thick-border) * 0.4) solid rgba(6,44,155,0.04);
  overflow:auto; /* contain floats */
}

.section.introduction > .section.description.left{
  float:left;
  width:48%;
  margin-right:4%;
}

.section.introduction > .section.description.center1,
.section.introduction > .section.description.center2,
.section.introduction > .section.description.center3{
  float:right;
  width:48%;
}

.section.introduction:after{content:"";display:block;clear:both}

/* Emphasize product portrait */
.section.introduction .portrait{max-width:100%;border-radius:12px;box-shadow:0 30px 80px rgba(2,6,23,0.12)}

/* Call-to-action button style for product pages */
.cta-primary{display:inline-block;padding:12px 18px;background:var(--accent);color:white;border-radius:10px;font-weight:700;text-decoration:none;box-shadow:0 18px 40px rgba(6,44,155,0.14)}

/* Tabs (product-style sidebar) */
.flexdetails{display:grid;gap:18px}
.flexdetails{grid-template-columns:260px 1fr;align-items:start}
.flexdetails .bar{grid-column:1;display:flex;flex-direction:column;gap:12px;padding:6px}
.flexdetails .bar .buttontab{width:100%;text-align:left;padding:14px 16px;border-radius:8px}
.buttontab{background:transparent;border:calc(var(--thick-border) * 0.6) solid rgba(6,44,155,0.07);padding:12px 16px;border-radius:10px;cursor:pointer;font-weight:600}
.buttontab.active{background:linear-gradient(90deg,var(--accent),#0956d6);color:white;border-color:transparent;box-shadow:0 18px 40px rgba(6,44,155,0.14)}

/* Tab content */
.Tab{display:none;padding:18px}
.Tab.active{display:block;grid-column:2}

/* Product/spec styling inside tabs */
.Tab h2{font-size:20px;margin-bottom:8px}
.spec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.spec-list dt{font-weight:700;color:#0f2a63}
.spec-list dd{margin:0;color:var(--muted)}

.description.left{display:flex;gap:18px;align-items:center;padding:6px}
.description.center1, .description.center2, .description.center3{margin-top:10px}

.switch{display:flex;gap:16px;flex-wrap:wrap}

/* Footer */
.section.footer{background:transparent;text-align:center;padding:18px;border-top:calc(var(--thick-border) * 0.8) solid rgba(6,44,155,0.06)}
.section.final a.newcolor{color:var(--accent);text-decoration:underline;font-weight:700}

/* Responsive */
@media (min-width:920px){
  .wrapper{grid-template-columns: 1fr 360px;align-items:start}
  /* By default, place each main .section across both columns so items don't
     get auto-placed into the sidebar column and appear clipped. If you want
     a true sidebar later, mark that element with a specific class (e.g. .sidebar)
     and position it explicitly. */
  .wrapper > .section{grid-column: 1 / -1}
  .section.banner{grid-column:1 / -1}

  /* Allow carousel slides to wrap and be visible on desktop monitors */
    .carousel{ overflow: visible; }
    /* Use a 3-column grid on desktop so extra slides can wrap into rows.
      Place the 4th slide under the 3rd by targeting nth-child(4). */
    .carousel-deck{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; align-items:start }
    .carousel-slide{ min-width:auto; width:100% }
    .carousel-deck > .carousel-slide:nth-child(4){ grid-column:3 }
}

  /* On wider screens allow the top grid to keep its buttons on one line */
  @media (min-width:720px){
    .section.grid{flex-wrap:nowrap}
    .section.button{flex:0 0 auto}
  }

  /* Make the first quotes bar display side-by-side paragraphs on wider screens */
  @media (min-width:720px){
    .wrapper > .section.bar:first-of-type{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
    .wrapper > .section.bar:first-of-type p{margin:0;padding:10px}
  }

  /* Stronger layout for top buttons: ensure they share the row 50/50 */
  @media (min-width:600px){
    .section.grid{flex-wrap:nowrap}
    .section.grid > .section.button{flex:0 0 calc(50% - 8px);max-width:calc(50% - 8px)}
    .section.grid > .section.button .section.button a, .section.grid > .section.button a{font-size:14px;padding:8px 10px}
  }

  /* Tighter quotes styling to reduce height */
  @media (min-width:600px){
    .wrapper > .section.bar:first-of-type{font-size:13px;line-height:1.35;gap:10px;padding:6px}
    .wrapper > .section.bar:first-of-type p{padding:8px;border-left:4px solid rgba(6,44,155,0.06);min-height:40px}
    .wrapper > .section.bar:first-of-type p i{font-style:italic}
    /* Showing full long quote — no clamp */
    .wrapper > .section.bar:first-of-type p:last-of-type{display:block}
  }

/* Layout for the .quote blocks inside the first bar */
.wrapper > .section.bar{
  display:block; /* default stack */
}

@media (min-width:680px){
  .wrapper > .section.bar{display:grid;grid-template-columns:1fr 1fr 2fr;gap:12px;align-items:start}
  .wrapper > .section.bar .quote{background:rgba(255,255,255,0.95);padding:8px;border-radius:8px}
  .wrapper > .section.bar .quote--short p{margin:0}
  .wrapper > .section.bar .quote--long p{margin:0}
}

@media (max-width:520px){
  .leftleft{width:100%;float:none;margin:0 0 12px 0}
  .carousel-deck{flex-direction:column}
  .portrait{max-width:140px}
}

/* Accessibility tweaks */
a:focus, button:focus {outline:4px solid rgba(6,44,155,0.18);outline-offset:4px}

/* Remove boxed backgrounds from description containers (user request) */
.description{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important}

/* Neutralize .section wrappers that contain only images so they don't show as cards */
.section.image-only{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important}
.section.image-only img{box-shadow:none !important;border-radius:6px}

/* Small utility */
h2{margin:0 0 8px 0}
h3{margin:0 0 6px 0}
p{margin:0 0 12px 0}

/* Defensive: hide empty .section elements to avoid stray boxes */
.section:empty{display:none !important}

/* Subtle animations */
@keyframes floaty{from{transform:translateY(0)}50%{transform:translateY(-4px)}to{transform:translateY(0)}}
.banner h1{animation:floaty 6s ease-in-out infinite}

/* Print friendly */
@media print{body{background:white} .section{box-shadow:none;border:1px solid #eee}}

/* Strong override: make top buttons share a single row and fill their halves */
@media (min-width:520px){
  .section.grid{flex-wrap:nowrap;flex-direction:row}
  .section.grid > .section.button{flex:1 1 50%;max-width:50%;min-width:160px}
  .section.grid > .section.button a{display:inline-block;width:100%;box-sizing:border-box;text-align:center}
}

/* Fallback for medium-small screens: two columns if space allows */
@media (min-width:400px) and (max-width:519px){
  .section.grid > .section.button{flex:1 1 50%;max-width:50%}
  .section.grid > .section.button a{width:100%;display:inline-block;text-align:center}
}

/* Hide any carousel controls (arrows, dots, navs) so no control UI shows */
/* Covers common libraries: Slick, Flickity, Glide, Swiper, Owl, custom controls */
.carousel-controls, .carousel-nav, .carousel-prev, .carousel-next, .carousel-button,
.carousel-dot, .carousel-dots, .carousel-pagination, .carousel__nav, .carousel__arrow,
.carousel__prev, .carousel__next, .carousel__bullets,
.slick-dots, .slick-arrow, .slick-prev, .slick-next,
.flickity-button, .flickity-prev-next-button, .flickity-page-dots,
.glide__arrows, .glide__bullets, .glider-prev, .glider-next,
.owl-nav, .owl-dots,
.swiper-button-next, .swiper-button-prev, .swiper-pagination,
[data-carousel-controls], [data-carousel-nav], [data-controls="controls"],
.carousel [role="button"], .carousel button,
.section.photos.carousel .controls,
.carousel [class*="-controls"], .carousel [class*="nav"],
.carousel [class*="dot"],
.carousel .controls, .carousel .nav,
.section.photos.carousel .carousel-controls {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Mobile-friendly adjustments (phone breakpoint).
   Assumption: target phones at max-width:600px. If you prefer a different
   breakpoint, change 600px to 480px or 768px as needed. */
@media (max-width:600px){
  :root{ --radius:10px }

  /* tighter page padding and card radii for small screens */
  .wrapper{ margin:12px auto; padding:14px; gap:14px }
  .section{ padding:14px; border-radius:10px }

  /* Banner: reduce padding and height so header fits without scrolling */
  .section.banner{ padding:20px 12px }
  .section.banner h1{ padding:20px 12px; min-height:auto; font-size:1.6rem }

  /* Make top grid stack into a single column for easy tapping */
  .section.grid{ flex-direction:column; gap:12px }
  .section.grid > .section.button{ flex:1 1 100%; max-width:100%; min-width:0 }
  .section.grid .section.button a,
  .section.button a{ display:block; width:100%; padding:14px 16px; font-size:16px }

  /* Carousel: stack slides vertically and let them be full width */
  .carousel-deck{ flex-direction:column }
  .carousel-slide{ min-width:auto; flex:0 0 auto; width:100% }

  /* Portraits and floats: stop floating and make them block-level */
  .leftleft{ width:100%; float:none; margin:0 0 12px 0 }
  .portrait{ max-width:180px; margin:0 auto; display:block }
  .portrait.edited{ max-width:260px }

  /* Introduction: remove floats and stack content vertically */
  .section.introduction > .section.description.left,
  .section.introduction > .section.description.center1,
  .section.introduction > .section.description.center2,
  .section.introduction > .section.description.center3{
    float:none; width:100%; margin:0 0 12px 0; display:block
  }
  .section.introduction:after{ content:""; display:block; clear:both }

  /* Tabs/sidebar: collapse to a single column and make tab buttons horizontally scrollable */
  .flexdetails{ grid-template-columns: 1fr; gap:12px }
  /* Stack tab buttons vertically on small screens so they're easy to tap */
  .flexdetails .bar{ grid-column:1; display:flex; flex-direction:column; overflow:visible; gap:8px; padding:6px 0 }
  .flexdetails .bar .buttontab{ flex:1 1 auto; width:100%; min-width:0 }
  .Tab{ grid-column:1 }
  /* Ensure the tab/bar container is visible and not collapsed by other rules */
  .flexdetails .bar, .flexdetails .bar button, .flexdetails .bar .buttontab{display:flex !important; visibility:visible !important}

  /* Make CTA and other important buttons full-width for easier tapping */
  .cta-primary{ display:block; width:100%; text-align:center; padding:12px 14px }
  .buttontab{ padding:12px 14px }

  /* Slightly smaller body text on phones */
  body{ font-size:14px }

  /* Ensure the first quotes bar doesn't get too cramped */
  .wrapper > .section.bar:first-of-type{ font-size:15px; padding:8px }
}

/* Aggressive phone UI for viewports under 520px.
   This block intentionally appears at the end of the file and uses
   a few !important fallbacks to ensure the mobile layout wins the cascade.
   It simplifies the page, increases tap targets, stacks CTAs and images,
   and reduces non-essential chrome for small screens. */
@media (max-width:519px){
  :root{ --radius:8px; --max-width:100% }

  /* Page-level compression */
  /* Reduce text slightly on very small viewports */
  html,body{font-size:14px}
  .wrapper{ margin:8px auto; padding:10px; gap:12px; max-width:100% }
  .section{ padding:12px !important; border-radius:8px !important; box-shadow:none !important; border:none !important }

  /* Banner shrink */
  .section.banner{ padding:14px 10px !important; align-items:center; text-align:center }
  .section.banner h1{ padding:10px 8px !important; min-height:auto !important; font-size:1.4rem }

  /* Top grid: force fully stacked, large CTAs */
  .section.grid{ display:flex !important; flex-direction:column !important; flex-wrap:wrap !important; gap:12px !important; align-items:stretch }
  .section.grid > .section.button{ flex:0 0 auto !important; width:100% !important; max-width:100% !important; min-width:0 !important }
  .section.grid .section.button a, .section.button a{
    display:block !important; width:100% !important; padding:16px 18px !important; font-size:18px !important; border-radius:10px !important; text-align:center !important
  }

  /* Carousel: make slides full-width stacked and reduce padding */
  .carousel, .carousel-deck{ display:block !important; overflow:visible !important }
  .carousel-deck{ display:flex !important; flex-direction:column !important; gap:12px !important; padding:6px !important }
  .carousel-slide{ min-width:100% !important; flex:0 0 auto !important; width:100% !important; padding:12px !important; border-radius:8px !important }

  /* Portraits and floats: full width, no floats */
  .leftleft, .portrait, .portrait.edited{ width:100% !important; max-width:100% !important; float:none !important; margin:0 0 12px 0 !important; display:block !important }

  /* Introduction: stack all description columns vertically */
  .section.introduction > .section.description.left,
  .section.introduction > .section.description.center1,
  .section.introduction > .section.description.center2,
  .section.introduction > .section.description.center3{
    float:none !important; width:100% !important; margin:0 0 12px 0 !important; display:block !important; padding:0 !important
  }

  /* Tabs/sidebar collapse: horizontal scrolling tabs that remain tappable */
  /* Stack tab buttons vertically on very small screens as well */
  .flexdetails{ grid-template-columns:1fr !important; gap:10px !important }
  .flexdetails .bar{ grid-column:1; display:flex !important; flex-direction:column !important; overflow:visible !important; gap:8px !important; padding:6px 0 }
  .flexdetails .bar .buttontab{ width:100% !important; flex:1 1 auto !important; min-width:0 !important }
  /* Safety: make sure the bar and its buttons are visible */
  .flexdetails .bar, .flexdetails .bar button, .flexdetails .bar .buttontab{ display:flex !important; visibility:visible !important }
  .Tab{ grid-column:1 !important; padding:10px !important }

  /* Make CTAs and important buttons obvious and touch-friendly */
  .cta-primary{ display:block !important; width:100% !important; padding:14px 16px !important; font-size:18px !important }
  .buttontab{ padding:12px 14px !important }

  /* Text and utilities */
  .rightright{ font-size:15px !important }
  h2{ font-size:18px !important }
  h3{ font-size:16px !important }
  p{ margin-bottom:14px !important }

  /* Images responsive */
  img{ max-width:100% !important; height:auto !important }

  /* Optional: hide less important decorative sections to declutter */
  .section.divider{ padding:8px !important }

  /* Ensure grid override wins even if other rules exist */
  .section.grid{ -webkit-flex-direction:column !important; -ms-flex-direction:column !important; flex-direction:column !important }
}

/* Tablet UI: improved layout for widths between 601px and 1205px */
@media (min-width:601px) and (max-width:1205px){
  :root{ --max-width:1000px; --radius:12px }

  /* Wrapper: introduce a relaxed two-column layout with a modest sidebar */
  .wrapper{ max-width:var(--max-width); padding:20px; gap:20px }
  .wrapper{ display:grid; grid-template-columns: 1fr 320px }
  /* By default make each main .section span both columns (stack under previous).
    If you want a true sidebar, add a specific class (e.g. .sidebar) to place
    that element into the second column explicitly. */
  .wrapper > .section{ grid-column: 1 / -1 }

  /* Banner: left-aligned headline with slightly reduced height */
  .section.banner{ padding:28px 20px; text-align:left; align-items:center }
  .section.banner h1{ padding:20px; min-height:160px; font-size:2rem; text-align:left }

  /* Top grid: keep buttons side-by-side but with improved spacing */
  .section.grid{ display:flex; flex-wrap:wrap; flex-direction:row; gap:14px; align-items:center }
  .section.grid > .section.button{ flex:0 0 calc(50% - 7px); max-width:calc(50% - 7px); min-width:120px }
  .section.grid .section.button a, .section.button a{ padding:10px 12px; font-size:15px }

  /* Carousel: moderate-sized slides in a row */
  .carousel-deck{ display:flex; gap:16px; padding:10px }
  .carousel-slide{ min-width:300px; flex:1 0 300px; padding:16px }

  /* On tablets, stack carousel slides inside .section.vertical like on phones */
  .section.vertical .carousel, .section.vertical .carousel-deck{ display:block !important; overflow:visible !important }
  .section.vertical .carousel-deck{ display:flex !important; flex-direction:column !important; gap:12px !important; padding:6px !important }
  .section.vertical .carousel-slide{ min-width:100% !important; flex:0 0 auto !important; width:100% !important; padding:12px !important }
  .section.vertical .leftleft, .section.vertical .portrait{ width:100% !important; max-width:100% !important; float:none !important; display:block !important }

  /* Portraits and floats: restored side-by-side product layout */
  .leftleft{ width:48%; float:left; margin-right:4% }
  .portrait{ max-width:220px }

  /* Introduction: two-column feel for description blocks */
  .section.introduction > .section.description.left{ float:left; width:46%; margin-right:4% }
  .section.introduction > .section.description.center1,
  .section.introduction > .section.description.center2,
  .section.introduction > .section.description.center3{ float:right; width:48% }

  /* Tabs: afford more room for the sidebar and content */
  .flexdetails{ grid-template-columns:260px 1fr }
  .flexdetails .bar{ padding:8px }
  .flexdetails .bar .buttontab{ padding:12px 14px }

  /* Slightly smaller text on tablet for denser layouts */
  body{ font-size:14px; line-height:1.45 }
  h2{ font-size:20px }
  h3{ font-size:18px }

  /* Reduce overly-large shadows for medium screens */
  .section{ box-shadow: 0 12px 30px rgba(6,44,155,0.06) }
}