/* ============================================================
   RESPONSIVE.CSS · Brebu Nou
   ------------------------------------------------------------
   Media queries · loaded LAST so it overrides everything.
   Two breakpoints (mirrors V6.1 exactly):
     • 1024px · admin grid collapses 4→2 columns
     •  900px · everything goes single-column
   ============================================================ */


/* ============================================================
   Tablet · 1024px
   ============================================================ */

@media (max-width: 1024px) {

  /* Admin services grid: 4 → 2 columns */
  .admin-grid {
    grid-template-columns: 1fr 1fr;
  }
  .admin-card {
    border-bottom: 1px solid var(--stone-hearth-soft);
  }
  .admin-card:nth-child(2) {
    border-right: none;
  }

  /* Obiective grid: 3 → 2 columns on tablet */
  .obiective-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 28px;
  }
}


/* ============================================================
   Mobile · 900px
   ============================================================ */

@media (max-width: 900px) {

  /* Tighter side gutter on mobile */
  :root {
    --gutter: 24px;
  }

  /* ===== CHROME on mobile · compact topbar + show hamburger ===== */

  /* Topbar · hide the entire left side (phone, email, address) on mobile.
     Contact info is fully accessible in the footer; keeping topbar clean
     means more room for A11Y + lang switcher, which need visible space. */
  .top-bar-left {
    display: none;
  }
  .top-bar-inner {
    justify-content: flex-end;     /* push A11Y + lang to the right edge */
    padding: 8px 0;
  }
  .top-bar-right {
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }

  /* A11Y controls · clean compact group, no label, equal-sized buttons */
  .a11y-controls .label {
    display: none;
  }
  .a11y-controls {
    gap: 4px;
    align-items: center;
  }
  /* WCAG 2.5.5 · 44×44 tap target on mobile · font hierarchy retained */
  .a11y-btn {
    min-width: 44px;
    min-height: 44px;
    height: auto;
    padding: 0 10px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Visual hierarchy for A−/A/A+ · A is base reference size */
  .a11y-btn.size-s { font-size: 0.7rem; }
  .a11y-btn.size-m { font-size: 0.85rem; }
  .a11y-btn.size-l { font-size: 1.0rem; }

  /* Lang switcher · tighter on mobile */
  .lang-switch {
    gap: 6px;
    align-items: center;
  }
  /* WCAG 2.5.5 · 44×44 tap target on mobile · font size kept compact */
  .lang-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide desktop main nav · show hamburger instead */
  .main-nav {
    display: none;
  }
  .hamburger {
    display: flex;            /* unhide on mobile */
  }


  /* ===== SPLASH HERO on mobile · compact · both cards visible together ===== */

  /* Anchor the hero to the top instead of vertical centering · lifts title
     and both portal cards higher so they read together on one screen */
  .splash {
    justify-content: flex-start;
  }

  /* Splash content · small top padding pulls the writing up */
  .splash-content {
    padding: 16px 24px 72px;
    max-width: 100%;
  }

  /* Hero title · scale down + center align */
  .splash-title {
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1.05;
    text-align: center;
    margin-bottom: 18px;
  }
  .splash-eyebrow {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    gap: 10px;                /* tighter spacing between text and flourishes on mobile */
    white-space: nowrap;      /* keep eyebrow on a single visual row */
    margin-bottom: 18px;
  }
  .splash-eyebrow::before,
  .splash-eyebrow::after {
    width: 20px;              /* shorter flourish lines on mobile */
  }

  /* Taglines · center + tighter so the cards rise into view */
  .splash-tagline-lead,
  .splash-tagline {
    text-align: center;
    max-width: 100%;
  }
  .splash-tagline-lead {
    font-size: 1rem;
    margin: 0 0 10px;
  }
  .splash-tagline {
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0 0 24px;
  }

  /* Portals · stacked, NARROWER column (centered) and TALLER cards · both
     still fit on one screen. The whole card is the link
     (<a class="splash-portal">), so the tap target stays large · WCAG 2.5.5 ok. */
  .splash-portals {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 0;
    max-width: min(320px, 100%);  /* narrower than full width, but never overflow viewport (Galaxy Fold 280px) */
    margin-left: auto;            /* center the column */
    margin-right: auto;
  }
  .splash-portal {
    padding: 34px 22px;        /* taller cards */
  }
  .splash-portal-head {
    margin-bottom: 14px;
    gap: 14px;
  }
  .splash-portal-icon {
    width: 32px;
    height: 32px;
  }
  .splash-portal-label {
    margin-bottom: 0;
  }
  .splash-portal-title {
    font-size: 1.3rem;
    margin: 0 0 10px;
  }
  .splash-portal-desc {
    font-size: 0.86rem;
    line-height: 1.6;
    margin: 0 0 18px;
    max-width: 100%;
  }
  .splash-portal-cta {
    padding: 8px 0 2px;
    font-size: 0.74rem;
  }


  /* ===== EDITORIAL INTERLUDE on mobile · single column · clean alignment ===== */

  .splash-interlude {
    padding: 56px 24px 48px;
  }
  .splash-interlude-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .splash-interlude-narrative {
    max-width: 100%;
    text-align: center;        /* center align narrative on mobile */
  }
  .splash-interlude-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.24em;
  }
  .splash-interlude-text {
    font-size: 1.0rem;
    line-height: 1.7;
    font-weight: 400;
    margin-top: 18px;
  }

  /* Highlights · drop the left border (looks bad without sidebar layout),
     center the label as a heading, but left-align the list inside a
     centered block · so the leading dashes are consistently positioned. */
  .splash-interlude-highlights {
    border-left: none;
    border-top: 1px solid var(--stone-hearth-soft);
    padding: 32px 0 0;
    text-align: center;
  }
  .splash-interlude-highlights-label {
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    margin-bottom: 16px;
  }
  /* List sits in a centered block but its content is left-aligned · this
     way each dash appears in the same column relative to the item,
     instead of floating randomly when each <a> centers itself. */
  .splash-interlude-list {
    columns: 1;
    list-style: none;
    text-align: left;
    display: inline-block;        /* shrink to content width, then center via parent */
    margin: 0 auto;
  }
  .splash-interlude-list li {
    margin: 0 0 10px;
  }
  .splash-interlude-list a {
    font-size: 0.94rem;
    padding-left: 24px;            /* explicit room for the leading dash */
    display: inline-block;
  }

  .splash-interlude-footnote {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    font-size: 0.7rem;
    padding-top: 32px;
    margin-top: 40px;
  }
  .splash-interlude-footnote-sep {
    display: none;
  }


  /* ===== FOOTER on mobile · single column ===== */

  .splash-footer {
    padding: 48px 24px 24px;
  }
  .splash-footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .splash-footer-bottom {
    margin-top: 32px;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    font-size: 0.7rem;
  }


  /* ===== FAB BUTTONS on mobile · horizontal toolbar at the bottom ===== */
  /* Layout shifts from vertical stack (right edge) to horizontal row
     centered at the bottom · feels more native on touch devices and
     spreads the tap targets so they don't crowd the right side.
     Uses #floatingToolbar id (set by floating-toolbar.js) for extra
     specificity to override the desktop column-reverse layout. */

  .floating-toolbar,
  #floatingToolbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    right: 0 !important;
    left: 0 !important;
    bottom: max(20px, env(safe-area-inset-bottom)) !important;
    gap: 22px !important;     /* generous spacing between icons */
    transition: bottom 0.3s ease;
  }

  /* When the cookie banner is showing, push the toolbar above it so the
     bottom-anchored FAB stack doesn't overlap the consent buttons. */
  body.has-cookie-banner .floating-toolbar,
  body.has-cookie-banner #floatingToolbar {
    bottom: calc(var(--cookie-banner-height, 200px) + 32px) !important;
  }

  /* Bottom scroll-clearance for the FAB cluster.
     The horizontal FAB row sits at bottom: 20px with ~44px tall buttons,
     so on hub pages (MOL, Avizier, Servicii, Informații) the last card
     would otherwise be permanently pinned under the FAB and hard to tap.
     Padding on body guarantees every interactive element can be scrolled
     above the FAB zone: clears the FAB and adds room for the iOS home
     indicator on devices that report safe-area-inset-bottom. */
  body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0)); }

  /* ===== FAB BUTTONS on mobile · icon-only, no background ===== */
  /* User feedback 2026-06-01: "doar icons essex green, fără background".
     We strip the round chip entirely. The icon glyph itself becomes the
     button, rendered in essex green with a soft halo (drop-shadow with a
     light edge) so it stays legible over light AND dark backgrounds
     without re-introducing a visible card. Tap zone stays 44×44 (WCAG)
     by keeping the width/height on the container even though it has no
     visible bounds. */

  .floating-toolbar > .cookie-fab,
  .floating-toolbar > .floating-btn,
  .cookie-fab,
  .floating-btn {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 44px;
    height: 44px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Icon glyph · essex green with a soft light halo so it doesn't get
     swallowed by darker photos / hero backgrounds. Two drop-shadows
     stack: an outer light halo for dark backgrounds, an inner dark
     edge for crispness on light backgrounds. */
  .cookie-fab svg,
  .floating-btn svg,
  .cookie-fab-icon svg,
  .floating-btn-icon svg {
    color: var(--essex) !important;
    stroke: var(--essex) !important;
    width: 22px;
    height: 22px;
    filter:
      drop-shadow(0 0 2px rgba(247, 246, 241, 0.85))
      drop-shadow(0 1px 2px rgba(31, 45, 39, 0.35));
  }

  /* Adaptive contrast · floating-toolbar.js samples the surface behind
     the row and adds .fab-on-dark over dark backgrounds (essex footer,
     photo bands). Icons flip to chantilly with an inverted halo; essex
     stays the default on light surfaces. Mobile-only by construction:
     this rule lives inside the 900px query and the JS gate matches it. */
  .floating-toolbar.fab-on-dark .cookie-fab svg,
  .floating-toolbar.fab-on-dark .floating-btn svg,
  .floating-toolbar.fab-on-dark .cookie-fab-icon svg,
  .floating-toolbar.fab-on-dark .floating-btn-icon svg {
    color: var(--chantilly) !important;
    stroke: var(--chantilly) !important;
    filter:
      drop-shadow(0 0 2px rgba(22, 32, 27, 0.85))
      drop-shadow(0 1px 2px rgba(247, 246, 241, 0.25));
  }

  /* Tap state · slight icon shift so the press is felt without a chip. */
  .cookie-fab:active svg,
  .floating-btn:active svg {
    transform: scale(0.92);
    transition: transform 0.08s ease;
  }


  /* ===== TAP HIGHLIGHT · kill the gray/pink overlay on Android Chrome ===== */
  /* This was the "rotund pe mouse" the user reported · it's the default
     -webkit-tap-highlight that appears when touching ANY clickable element
     on Android. Setting it to transparent removes the overlay entirely. */

  *,
  *::before,
  *::after,
  a,
  button,
  input,
  textarea,
  select,
  label {
    -webkit-tap-highlight-color: transparent;
  }


  /* ===== COOKIE BANNER on mobile · single column ===== */

  .cookie-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }


  /* ===== EXISTING legacy rules · kept for internal pages ===== */

  /* Hero compaction (used on internal pages, not splash) */
  .hero {
    min-height: 80vh;
  }
  .hero-content {
    padding-bottom: 64px;
  }
  .hero-progress {
    bottom: 28px;
  }
  .hero-progress-line {
    width: 40px;
  }
  .hero-ctas {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hero-badge {
    top: 24px;
    right: 20px;
    font-size: 0.62rem;
  }
  .hero-badge strong {
    font-size: 0.72rem;
  }

  /* Obiective grid (internal pages) */
  .obiective {
    padding: 80px 0;
  }
  .obiective-header {
    margin-bottom: 56px;
  }
  .obiective-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Spread sections */
  .spread {
    padding: 100px 0;
  }
  .spread-photo-wrap {
    margin-bottom: 60px;
  }
  .spread-photo {
    aspect-ratio: 4/3;
    min-height: 320px;
  }

  /* Story */
  .story {
    padding-bottom: 100px;
  }
  .story-photo-wrap {
    margin-bottom: 60px;
  }
  .story-photo {
    aspect-ratio: 4/3;
    min-height: 320px;
  }

  /* Events */
  .events-secondary {
    margin-top: 80px;
  }
  .event-row {
    grid-template-columns: 100px 1fr 44px;
    gap: 24px;
    padding: 32px 0;
  }

  /* Admin */
  .admin-grid {
    grid-template-columns: 1fr;
  }
  .admin-card {
    border-right: none;
  }
  .admin-news-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  /* Contact + generic footer */
  .contact-grid,
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Via Transilvanica */
  .via {
    padding: 100px 0;
  }

}


/* ============================================================
   Very small mobile · 380px (Galaxy Fold, iPhone SE compact)
   ============================================================ */

@media (max-width: 380px) {

  /* Even tighter padding on very narrow screens */
  .splash-content {
    padding: 64px 16px 100px;
  }
  .splash-interlude {
    padding: 56px 16px;
  }
  .splash-footer {
    padding: 40px 16px 20px;
  }

  /* Brand text shrinks slightly · keep blazon prominent */
  .brand-text .brand-name {
    font-size: 0.88rem;
  }
  .brand-text .brand-sub {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
  }

  /* Eyebrow keeps shrinking · stays on one row even with the longer
     EN string "MOUNTAINOUS BANAT · CARAȘ-SEVERIN" on iPhone SE width. */
  .splash-eyebrow {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    gap: 8px;
  }
  .splash-eyebrow::before,
  .splash-eyebrow::after {
    width: 16px;
  }

  /* A11Y buttons · WCAG 2.5.5 requires 44×44 minimum, padding keeps label readable */
  .a11y-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 2px 8px;
  }
}


/* ============================================================
   Touch device override · no custom cursor effects
   ------------------------------------------------------------
   On touch-only devices (no mouse), force default cursor everywhere
   so no circular hover indicators or custom cursor effects ever
   appear. This addresses "mouseul are un rotund" reported on mobile.
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
  *,
  *::before,
  *::after {
    cursor: default !important;
  }
  a,
  button,
  [role="button"],
  input,
  textarea,
  select,
  label {
    cursor: pointer !important;
  }
}