/* =========================
   AUTH PAGES
   Login / Register / Forgot / Reset
   ========================= */

:root{
  /* Paleta CATSI si existeix (i fallback) */
  --auth-text:   var(--catsi-black, #1F1F1F);
  --auth-muted:  rgba(31,31,31,.70);
  --auth-border: var(--catsi-mahogany, #5E4C3F);
  --auth-bg:     #fff;

  --auth-btn:       var(--catsi-mahogany, #5E4C3F);
  --auth-btn-hover: #4f3f35;
}

/* IMPORTANT: no toquem body/main/header global */
.auth-grid{
  min-height: calc(100vh - 220px);
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  background: var(--auth-bg);
  margin-top: -100px; /* igual que home/hero */
}

/* Font (només auth) */
.auth-grid,
.auth-grid *{
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* -------------------------------------------------
   Alineació amb la “pastilla” del header-home
   header-home.css fa:
   .hp-header .container { max-width: 1400px; padding-left:120px; padding-right:120px; }
   ------------------------------------------------- */

/* Columna esquerra */
.auth-left{
  display: flex;
  justify-content: flex-start;          /* que arranqui des de l'edge alineat */
  padding-top: 200px;
  padding-bottom: 80px;

  /* left edge = (viewport - 1400)/2 + 120 */
  padding-left: calc((100vw - 1400px) / 2 + 120px);
  padding-right: 80px;
}

/* Card */
.auth-card{
  width: min(520px, 100%);
}

/* Títol */
.auth-title{
  margin: 0 0 34px 0;
  font-size: clamp(40px, 4vw, 50px);
  line-height: 1.05;
  font-weight: 800;
  color: var(--auth-text);
}

/* Form base */
.auth-form{
  display: grid;
  gap: 18px;
}

/* REGISTER: 2 column layout */
.auth-form--register{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 18px;
  align-items: start;
}

/* Full width elements */
.auth-form--register .auth-full,
.auth-form--register .auth-check,
.auth-form--register .auth-captcha,
.auth-form--register .auth-actions,
.auth-form--register .auth-btn{
  grid-column: 1 / -1;
}

/* Passwords: mateixa amplada que la resta (columna esquerra) */
.auth-form--register .auth-left-col{
  grid-column: 1 / 2;
}

/* Camps */
.auth-field{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.auth-field label{
  font-size: 16px;
  font-weight: 700;
  color: var(--auth-text);
}

/* Inputs */
.auth-field input{
  width: 100%;
  height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--auth-border);
  border-radius: 999px;
  font-size: 15px;
  outline: none;
  background: #fff;
  min-width: 0;
}

.auth-field input:focus{
  border-color: var(--auth-border);
  box-shadow: 0 0 0 3px rgba(94,76,63,.12);
}

/* Checkbox termes */
.auth-check{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--auth-muted);
}

.auth-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--auth-btn);
}

/* CAPTCHA */
.auth-captcha{
  margin-top: 6px;
}

/* Botó */
.auth-btn{
  width: fit-content;
  margin-top: 6px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--auth-btn);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.auth-btn:hover{
  background: var(--auth-btn-hover);
}

/* Links */
.auth-links{
  margin: 0;
  font-size: 14px;
  color: var(--auth-muted);
}

.auth-link{
  color: var(--auth-text);
  font-weight: 700;
  text-decoration: none;
}

.auth-link:hover{
  text-decoration: underline;
}

/* Bottom row (ja tens compte + tornar) */
.auth-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 6px;
}

/* Link Tornar (icona com al mockup) */
.auth-back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--auth-text);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.auth-back__icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--auth-btn);
  color: #fff;
  border: none;
  font-size: 18px;
  line-height: 1;
}

.auth-back:hover .auth-back__icon{
  background: var(--auth-btn-hover);
}

/* Errors */
.auth-alert{
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid #f0c7c7;
  background: #fff3f3;
  color: #7b1f1f;
  font-size: 14px;
}

.auth-error{
  font-size: 13px;
  color: #7b1f1f;
}

/* Columna dreta (imatge via HTML style="") */
.auth-right{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: calc(100vh - 220px);
}

/* Responsive (encara que ara no ens hi matem massa) */
@media (max-width: 900px){
  .auth-grid{
    grid-template-columns: 1fr;
    min-height: calc(100vh - 220px);
  }

  .auth-right{
    order: -1;
    min-height: 260px;
  }

  .auth-left{
    padding: 36px 18px 56px;
  }

  .auth-form--register{
    grid-template-columns: 1fr;
  }

  .auth-form--register .auth-left-col{
    grid-column: 1 / -1;
  }
}

/* =========================
   LOGIN – camps més curts
   ========================= */

.auth-form--login{
  max-width: 420px;   /* controla amplada total del form */
}

.auth-form--login .auth-field input{
  max-width: 360px;   /* camps més curts */
}

.auth-form--login .auth-btn{
  max-width: 220px;   /* botó més compacte */
}

/* =========================
   ACTIVACIÓ / PÀGINES CURTES
   Força una alçada mínima gran en desktop perquè la foto no “s’aplati”
   ========================= */

@media (min-width: 901px){
  .auth-grid{
    /* mínim: viewport (restant header) o 1073px (alçada real de la foto) */
    min-height: max(calc(100vh - 220px), 1073px);
    align-items: stretch; /* assegura que les columnes s'estiren */
  }

  .auth-left,
  .auth-right{
    min-height: 100%;
  }
}