/*
© Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited.
For copyright inquiries: jacques@toptronic.com
  PLWS :: Plazdiez Website — CSS Styles Part 3 of 3
  Project: Paul Lambourn Web Site (PLWS) — www.plazdiez.co.za
  Generated: 2026-08-01T13:21:29+1000
  Continuation from styles_002.css
  This file contains: All responsive breakpoints for
    Mobile → Tablet → Laptop → Desktop → 8K
*/

/* ============================================================
   SECTION 10: RESPONSIVE BREAKPOINTS
   ---------------------------------------------------------
   -- Jacques: These are rules that change the layout based on
     screen size. Like having different blueprints for different
     building sizes.
   -- Students: We use "mobile-first" — default styles are for
     small screens, then we add overrides for bigger screens.
   ============================================================ */

/* ---------- MOBILE (320px – 480px) ---------- */
/* Default styles above already target mobile. Small tweaks: */
@media screen and (max-width: 480px) {
  :root {
    --header-height: 56px;          /* Smaller header on tiny screens */
    --carousel-arrow-size: 40px;    /* Smaller arrows */
    --sp-3xl: 40px;
    --sp-2xl: 32px;
  }

  /* Stack header nav vertically when hamburger is open */
  .header-nav {
    display: none;                /* Hidden behind hamburger on mobile */
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--clr-charcoal);
    flex-direction: column;
    padding: var(--sp-md);
    gap: 0;
  }

  .header-nav.mobile-open {
    display: flex;                /* Show when hamburger is clicked */
  }

  .header-nav a {
    padding: var(--sp-sm) var(--sp-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Show hamburger button */
  .hamburger {
    display: block;
  }

  /* Carousel takes full width on mobile */
  .carousel {
    border-radius: var(--radius-sm);
  }

  .carousel-image-wrap {
    aspect-ratio: 4 / 3;          /* Taller on mobile */
  }

  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .carousel-arrow-left  { left: var(--sp-xs); }
  .carousel-arrow-right { right: var(--sp-xs); }

  /* Fullscreen arrows smaller on mobile */
  .fullscreen-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.3rem;
  }

  .fullscreen-arrow-left  { left: var(--sp-sm); }
  .fullscreen-arrow-right { right: var(--sp-sm); }

  /* Hero tighter on mobile */
  .hero {
    padding: var(--sp-2xl) var(--sp-md);
  }
}

/* ---------- TABLET (481px – 768px) ---------- */
@media screen and (min-width: 481px) and (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  /* Show full horizontal nav on tablet */
  .header-nav {
    display: flex;
    flex-direction: row;
    position: static;
    background: none;
    padding: 0;
    gap: var(--sp-xs);
  }

  .header-nav a {
    font-size: 0.8rem;
    padding: var(--sp-xs) var(--sp-xs);
    border-bottom: none;
  }

  .hamburger {
    display: none;              /* Hide hamburger on tablet+ */
  }

  .carousel-image-wrap {
    aspect-ratio: 16 / 9;       /* Standard widescreen */
  }

  .carousel {
    border-radius: var(--radius-md);
  }
}

/* ---------- LAPTOP (769px – 1366px) ---------- */
@media screen and (min-width: 769px) and (max-width: 1366px) {
  :root {
    --header-height: 70px;
  }

  .header-nav a {
    font-size: 0.85rem;
    padding: var(--sp-xs) var(--sp-sm);
  }

  .carousel-image-wrap {
    aspect-ratio: 16 / 9;
  }

  .carousel-arrow {
    width: 48px;
    height: 48px;
    font-size: 1.6rem;
  }

  .carousel-arrow-left  { left: var(--sp-md); }
  .carousel-arrow-right { right: var(--sp-md); }
}

/* ---------- DESKTOP (1367px – 2560px) up to 4K ---------- */
@media screen and (min-width: 1367px) and (max-width: 2560px) {
  :root {
    --max-width: 1400px;
  }

  .header-nav a {
    font-size: 0.9rem;
    padding: var(--sp-sm) var(--sp-md);
  }

  .carousel-image-wrap {
    aspect-ratio: 16 / 9;
  }

  .carousel-arrow {
    width: 56px;
    height: 56px;
    font-size: 1.8rem;
  }
}

/* ---------- 4K to 8K (2561px+) ---------- */
/* -- Students: 8K is 7680×4320 pixels. At this size everything
   must scale up so text is still readable and images are sharp. */
@media screen and (min-width: 2561px) {
  :root {
    --max-width: 2400px;          /* Wider content area for 8K */
    --header-height: 100px;       /* Taller header */
    --carousel-arrow-size: 72px;  /* Bigger arrows */
    --sp-3xl: 100px;
    --sp-2xl: 72px;
  }

  /* Scale up base font for readability on 8K */
  html {
    font-size: 20px;              /* 1rem = 20px on 8K screens */
  }

  .header-logo img {
    height: 64px;                 /* Bigger logo */
  }

  .carousel-image-wrap {
    aspect-ratio: 21 / 9;        /* Ultra-wide for 8K */
  }

  .carousel-arrow {
    width: 72px;
    height: 72px;
    font-size: 2.5rem;
  }

  .carousel-arrow-left  { left: var(--sp-lg); }
  .carousel-arrow-right { right: var(--sp-lg); }

  .fullscreen-arrow {
    width: 80px;
    height: 80px;
    font-size: 3rem;
  }

  /* Dot indicators bigger */
  .carousel-dot {
    width: 16px;
    height: 16px;
  }
}