@charset "UTF-8";
/* ==========================================================================
   SUGUS — Responsive overrides
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Everything here is a media query; no new components
   are introduced, only adjustments to the ones defined in style.css.

   Breakpoints, largest first (desktop-first overrides on top of a layout that
   already uses fluid clamp() values for type and spacing):

     1180px   narrow desktop  — tighten grids
      980px   tablet landscape — nav collapses into the drawer
      760px   tablet portrait  — single column layouts
      520px   phone            — full-width actions, reduced ornament

   Tested at 375 / 768 / 1024 / 1440 px.
   ========================================================================== */

/* ==========================================================================
   NARROW DESKTOP  (<= 1180px)
   ========================================================================== */

@media (max-width: 1180px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  /* The newsletter column drops below the link columns. */
  .footer__col--newsletter {
    grid-column: 1 / -1;
  }

  .nav__list {
    gap: 0;
  }

  .nav__link {
    padding-inline: var(--space-3);
    font-size: var(--text-sm);
  }
}

/* ==========================================================================
   TABLET LANDSCAPE  (<= 980px)
   Navigation collapses into a full-height drawer.
   ========================================================================== */

@media (max-width: 980px) {
  .nav__toggle {
    display: block;
  }

  /* The centred logo lives inside <nav>, which becomes the drawer here, so
     the bar copy takes over and the centred one is removed. */
  .header__logo--bar {
    display: block;
    width: clamp(104px, 26vw, 130px);
  }

  .header__logo--centre {
    display: none;
  }

  /* Logo left, burger right. */
  .header__inner {
    justify-content: space-between;
  }

  /* Both link groups stack in the drawer, in source order:
     Acasă / Despre noi / Produse / Campanii / Regulamente / Contact. */
  .nav__list--start,
  .nav__list--end {
    flex: none;
    justify-content: flex-start;
  }

  /* Drawer: off-canvas panel sliding in from the right. */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-drawer);
    /* Stack the two groups vertically instead of centring them on a row. */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-2);
    flex: none;
    width: min(360px, 88vw);
    padding: calc(84px + var(--space-6)) var(--space-5) var(--space-6);
    background-color: var(--color-cream);
    border-left: 3px solid var(--color-ink);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
    overflow-y: auto;
    /* Keeps the drawer out of the tab order while it is closed. */
    visibility: hidden;
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    width: 100%;
  }

  .nav__link {
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-lg);
    justify-content: flex-start;
    border-radius: var(--radius-md);
  }

  /* CAMPANII keeps its emphasis inside the drawer, full width and squared
     off to match the stacked items around it. */
  .nav__link--campaigns {
    margin-left: 0;
    margin-top: var(--space-3);
    justify-content: center;
    transform: none;
  }

  /* Dim the page behind the open drawer. Inserted by main.js. */
  .nav-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-sticky);
    background-color: rgba(43, 21, 104, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out);
  }

  .nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* Locks background scrolling while the drawer is open. */
  body.has-drawer-open {
    overflow: hidden;
  }

  /* --- Layout -------------------------------------------------------- */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero__content {
    max-width: none;
    text-align: center;
    margin-inline: auto;
  }

  .hero__content .lead {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  .hero__stage {
    order: -1;
    min-height: 320px;
  }

  /* The three-pack fan tightens so it still fits a narrow column. */
  .hero__pack--left {
    transform: translate(-52%, 10%) rotate(-12deg);
  }

  .hero__pack--right {
    transform: translate(52%, 12%) rotate(12deg);
  }

  /* Hover openings are pointless on a stacked layout — and on touch there is
     no hover at all — so the fan stays put. */
  .hero__stage:hover .hero__pack--left {
    transform: translate(-52%, 10%) rotate(-12deg);
  }

  .hero__stage:hover .hero__pack--right {
    transform: translate(52%, 12%) rotate(12deg);
  }

  .hero__stage:hover .hero__pack--lead {
    transform: translateY(-2%);
  }

  /* GUS stops breaking out of the band once the layout is single column —
     the overhang reads as a mistake without a second column beside it. */
  .split__image--oversized {
    margin-top: 0;
    margin-bottom: 0;
    width: clamp(240px, 62vw, 420px);
  }

  .split {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Media always leads on narrow screens, whatever the desktop order was. */
  .split--reverse .split__media {
    order: -1;
  }

  .modal__inner {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .modal__media {
    padding: var(--space-5);
  }

  .modal__image {
    max-height: 260px;
  }
}

/* ==========================================================================
   TABLET PORTRAIT  (<= 760px)
   ========================================================================== */

@media (max-width: 760px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Category cards stay two-up — four stacked cards would bury the grid. */
  .grid--categories {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .grid--products {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .form__row {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .campaign-group__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* The three states stack, keeping their order: active, upcoming, ended. */
  .campaign-columns {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }

  /* Section rhythm tightens so pages do not become endless on phones. */
  .section {
    padding-block: clamp(2.5rem, 1.5rem + 5vw, 4rem);
  }

  .campaign-hero__banner {
    /* Portrait crop reads better on a narrow screen than a letterbox. */
    aspect-ratio: 4 / 5;
  }

  .step {
    padding-left: var(--space-5);
    padding-top: var(--space-8);
  }

  .step::before {
    top: var(--space-4);
    left: var(--space-5);
  }
}

/* ==========================================================================
   PHONE  (<= 520px)
   ========================================================================== */

@media (max-width: 520px) {
  .grid--categories,
  .grid--products {
    grid-template-columns: 1fr;
  }

  .footer__grid {
    grid-template-columns: 1fr;
  }

  /* Full-width actions are easier to hit one-handed. Side-by-side hero
     buttons get too narrow to tap at this width, so the inline row is
     allowed to stack again here. */
  .hero__actions--inline {
    flex-wrap: wrap;
  }

  .hero__actions .btn,
  .campaign-card__actions .btn,
  .doc-row .btn {
    width: 100%;
  }

  .newsletter {
    flex-direction: column;
  }

  .newsletter .btn {
    width: 100%;
  }

  .doc-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* Three packs are too many for a phone-width hero: the flanking two shrink
     to a suggestion rather than competing with the lead pack. */
  .hero__pack--left,
  .hero__pack--right {
    width: clamp(88px, 26vw, 130px);
    opacity: 0.95;
  }

  .modal {
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border-width: 0;
  }

  .modal__inner {
    max-height: 100vh;
  }

  /* Marquee slows down; at this width the text passes too fast to read. */
  .marquee__track {
    animation-duration: 24s;
  }

  .marquee__item {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   POINTER-BASED RULES
   The custom cursor is a mouse affordance. Anything without a fine pointer
   keeps the native touch behaviour; custom-cursor.js makes the same check
   before it starts, this is the styling half of that decision.
   ========================================================================== */

@media (hover: none), (pointer: coarse) {
  .cursor-layer {
    display: none;
  }

  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button {
    cursor: auto;
  }

  /* Hover-only reveals must not hide content on touch devices. */
  .category-card__image,
  .product-card__image {
    transform: none;
  }
}

/* ==========================================================================
   PRINT
   Regulations are the page most likely to be printed, so the stylesheet
   strips ornament and keeps the document legible in black and white.
   ========================================================================== */

@media print {
  .header,
  .footer,
  .cursor-layer,
  .marquee,
  .nav-overlay,
  .btn,
  .wave,
  .blob {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }

  .section {
    padding-block: 1rem;
  }

  .accordion__panel {
    display: block !important;
  }

  /* Spell out link targets, which are lost on paper. */
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 9pt;
  }
}