/* =================================
   MIN-WIDTH BREAKPOINTS (mobile-first)
   ================================= */

/* ≥ 395px */
@media (min-width: 395px){
  .players-stats{
    flex-direction: row;
  }
}

/* ≥ 640px */
@media (min-width: 640px){
  .main h1 {
    font-size: 6rem;
  }

  .players-controls button{
    padding: 0.3rem 1.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
  }

  .data-refresh .btn{
    padding: 0.3rem 1.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.04rem;
  }

  .players-name{
    font-size: 2rem;
  }

  .main .player-name{
    font-size: 2rem;
  }

  .main .tappe-name{
    font-size: 1.7rem;
  }

  .players-stats-main{
    min-width: 180px;
    margin-right: 1rem;
  }

  .players-stats-main li{
    font-size: 1.5rem;
  }

  .search{
    min-width: 450px;
    width: auto;
  }

  .home-title {
    font-size: 3rem;
  }


  .player-top-nav {
    grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  }

  .player-top-nav__side--prev {
    justify-content: flex-start;
    display: flex;
  }

  .player-top-nav__side--next {
    justify-content: flex-end;
    display: flex;
  }


  .player .player-name {
    margin-bottom: 0;
    text-align: center;
    
  }

  .player-nav-btn {
    width: auto;
  }

  .manual-guide {
    padding: 2rem;
  }

  .manual-guide > h2 {
    font-size: 2.2rem;
  }

  .manual-guide__content h3 {
    font-size: 1.5rem;
  }

  .manual-guide__content pre {
    padding: 1.5rem;
    font-size: 0.95rem;
  }


  .archive-season-card,
  .season-link-card {
    padding: 2rem;
  }

  .archive-season-title,
  .season-link-card h2 {
    font-size: 2rem;
  }

  .season-header h1 {
    font-size: 3rem;
  }

}

/* ≥ ~960px (60rem) */
@media screen and (min-width: 60rem) {
  body {
    --padding: 3rem;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }

  .grid > .column {
    grid-column: span var(--columns);
  }
}

/* ≥ 1024px */
@media (min-width: 1024px){
  .players-item {
    padding: 2rem;
  }
}

/* Desktop: menu sempre visibile, hamburger nascosto (≥ 1025px) */
@media (min-width: 1025px){
  .menu {
    display: flex;
    position: static;
    background: none;
    padding: 0;
    box-shadow: none;
    flex-direction: row;
  }

  .menu-toggle {
    display: none;
  }
}

/* ≥ 1280px */
@media (min-width: 1280px){
  .players-name{
    font-size: 2.8rem;
  }

  .main .player-name{
    font-size: 2.8rem;
  }

  .main .tappe-name{
    font-size: 2.2rem;
  }
}



/* =================================
   MAX-WIDTH BREAKPOINTS
   ================================= */

/* Header + menu mobile (≤ 1024px) */
@media (max-width: 1024px){

  .header {
    align-items: flex-start;
    z-index: 20;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    background-color: var(--color-black);
    padding: 1rem;
    margin-bottom: 0;
  }

  .logo {
    padding: 1rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    height: 200px;
  }

  /* stato standard su mobile: logo visibile, testo pronto */
  .logo svg {
    display: block;
    transform: translateY(0);
  }

  .logo-text {
    display: block;              /* reale su mobile */
    opacity: 0;                  /* ma invisibile di default */
    transform: translateY(4px);  /* leggermente più in basso */
    pointer-events: none;        /* non cliccabile finché invisibile */
    position: absolute;
  }

  .header.header--scrolled .logo {
    height: 80px;
  }

  /* stato scrolled su mobile: fade/slide da logo → testo */
  .header.header--scrolled .logo svg {
    opacity: 0;
    transform: translateY(-4px);
  }

  .header.header--scrolled .logo-text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 30; /* sopra l’overlay */
  }

  .menu {
    position: fixed;
    inset: 0; /* top, right, bottom, left: 0 */
    background-color: var(--color-black);
    padding: 8rem 2rem 6rem;
    display: none;
    flex-direction: column;
    align-items: stretch;   /* 👈 così i figli prendono tutta la larghezza */
    justify-content: flex-start;
    gap: 1.5rem;
    z-index: 25; /* sotto al toggle, sopra tutto il resto */
  }

  .menu a svg{
    width: 32px; 
    height: 32px;
  }
  .menu.is-open {
    display: flex;
  }

  /* Link principali in alto */
  .menu-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    flex-grow: 1;          /* 👈 spinge la parte bottom in fondo */
  }

  .menu-links a {
    padding: 0.25rem 0;
    font-size: 2.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .menu-links a svg {
    width: 32px;
    height: 32px;
  }

  /* Box in fondo con login/logout + social */
  .menu-bottom {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 0.5rem;
  }

  .menu-user {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
    position: relative;
    top: 1.5rem;
  }

  .menu-bottom .menu-auth-link {
    margin-top: 0.25rem;
    font-size: 1.4rem;
  }

  .menu-bottom .social {
    padding: 0.5rem 0 0;
  }

  .menu-bottom .social a {
    padding: 0.25rem 1.5rem 0.25rem 0;
  }
}

@media (min-width: 900px) {
  .archive-seasons,
  .season-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ✅ Mobile: sidebar sopra (≤ 900px) */
@media (max-width: 900px){
  .players-layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "side"
      "list";
    gap: 1.25rem;
  }

  .players-col-side{
    position: static;
    top: auto;
  }

  .players-panel{
    margin-top: 0;
  }

}

/* Tablet (≤ 1000px) */
@media (max-width: 1000px){
  .player-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .player-tappe-wrap{
    grid-column: 1 / -1;
  }

  /* Pairings: 1 colonna a tutta larghezza */
  .pairings-grid{
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0.875rem;
  }
}

/* Mobile (≤ 700px) */
@media (max-width: 700px){
  .player-stats-grid{
    grid-template-columns: 1fr;
  }

  .player-tappa{
    grid-template-columns: 70px 100px auto;
    gap: 0.25rem;
  }

  .player-tappa__rank{
    justify-self: flex-start;
  }

  .player-tappe-wrap{
    grid-column: 1 / -1;
  }

  .pairings-grid{
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .risultati-panel,
  .pairings-round{
    padding: 0.875rem;
    border-radius: 0.875rem;
  }

  .pairing-match{
    grid-template-columns: 60px 1fr;
  }


  .manual-page {
    width: 100%;
  }

  .manual-header {
    margin-bottom: 2rem;
  }

  .manual-intro {
    font-size: 1.05rem;
  }

  .manual-guides {
    gap: 1.25rem;
  }

  .manual-guide {
    padding: 1rem;
    border-radius: 0.875rem;
  }

  .manual-guide > h2 {
    font-size: 1.55rem;
  }

  .manual-guide__description {
    margin-bottom: 1.5rem;
    font-size: 1rem;
  }

  .manual-guide__content h3 {
    margin-top: 2rem;
    font-size: 1.2rem;
  }

  .manual-guide__content ul,
  .manual-guide__content ol {
    margin-left: 1.25rem;
  }

  .manual-guide__content pre {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
    padding: 1rem;
    font-size: 0.78rem;
    border-radius: 0.65rem;
  }

  .archive-page,
  .season-page {
    width: 100%;
  }

  .archive-intro {
    margin-bottom: 2rem;
    font-size: 1.05rem;
  }

  .archive-season-card,
  .season-link-card {
    padding: 1rem;
    border-radius: 0.875rem;
  }

  .archive-season-title,
  .season-link-card h2 {
    font-size: 1.55rem;
  }

  .season-header {
    margin-bottom: 2rem;
  }

  .season-header h1 {
    font-size: 2rem;
  }

  .season-dates {
    font-size: 1.05rem;
  }

  .season-final-date {
    font-size: 0.95rem;
  }
}

/* Mobile small (≤ 480px) */
@media (max-width: 480px){
  .players-layout{
    gap: 1rem;
  }

  .players-panel{
    padding: 0.875rem;
    border-radius: 0.875rem;
  }
}