/* Real C.D. Carabanchel: the tournaments. Every colour, size, radius, shadow and duration here is a token from the
   top of styles.css; this file defines none of its own. Each tournament is its own poster pasted on the wall of
   the barrio, and the season page is the stretch of wall where the four hang side by side. */

/* the poster: the red sheet at the top of a tournament page */
.hero--torneo .sheet--torneos{animation-delay:.1s}
.cartel{display:grid;gap:var(--s-4);align-content:start;color:var(--c-paper);min-width:0}
.cartel__k{font-family:var(--f-display);font-stretch:76%;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:var(--t-0);color:var(--c-secondary);margin:0}
.cartel__title{font-family:var(--f-display);font-size:min(var(--t-7),15cqi);font-stretch:96%;font-weight:850;line-height:.9;letter-spacing:-.03em;text-transform:uppercase;color:var(--c-paper);margin:0;text-wrap:balance}
.cartel__who{font-family:var(--f-body);font-style:italic;font-size:var(--t-3);line-height:1.25;color:var(--c-secondary);margin:0;max-width:34ch}
.cartel__menores{font-family:var(--f-display);font-stretch:86%;font-weight:700;font-size:var(--t-1);color:var(--c-paper);margin:0}
.cartel__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin:0}
.cartel__nota{font-family:var(--f-display);font-stretch:88%;font-size:var(--t-0);color:var(--c-secondary);margin:0}
.sheet--torneos .btn{background:var(--c-paper);color:var(--c-accent);border-color:var(--c-paper)}
.sheet--torneos .btn:hover{background:var(--c-primary);color:var(--c-paper);border-color:var(--c-primary)}
.sheet--torneos .btn--ghost{background:transparent;color:var(--c-paper)}

/* the boxes of the old match posters: a box for the day, a box for the hour, a box for the ground */
.cajas{display:flex;flex-wrap:wrap;gap:var(--s-3);list-style:none;margin:0;padding:0}
.caja{display:grid;gap:var(--s-1);align-content:start;background:var(--c-paper);color:var(--c-ink);border:2px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-2) var(--s-3);font-family:var(--f-display);font-stretch:82%;flex:1 1 7.5rem;min-width:0}
.caja span{font-size:var(--t-0);text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:var(--c-muted)}
.caja b{font-size:var(--t-2);font-weight:800;line-height:1.05;letter-spacing:-.01em}
.caja b.is-open,.abierto{font-family:var(--f-body);font-style:italic;font-weight:400;font-size:var(--t-1);color:var(--c-muted);letter-spacing:0}

/* the status: a small square in the status colour, then the word */
.estado{display:inline-flex;align-items:center;gap:var(--s-2);font-family:var(--f-display);font-stretch:80%;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:var(--t-0);margin:0;color:var(--c-ink)}
.estado::before{content:"";width:.7em;height:.7em;border-radius:var(--r-a);background:var(--c-gold);flex:none}
.estado--inscripcion-abierta::before{background:var(--c-ok)}
.estado--completo::before{background:var(--c-warn)}
.estado--cerrado::before{background:var(--c-muted)}
.estado--jugado::before{background:var(--c-primary)}
.sheet .estado{color:var(--c-paper)}
.sheet .estado--jugado::before{background:var(--c-paper)}

/* the moment: the shirt beside the strip of facts */
.momento{display:grid;gap:var(--s-6);align-items:start}
.camiseta{margin:0;display:grid;gap:var(--s-2)}
.camiseta img{width:100%;aspect-ratio:4 / 5;object-fit:cover;border-radius:var(--r-a);background:var(--c-secondary);box-shadow:var(--sh-b)}
.camiseta figcaption{max-width:var(--measure)}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);list-style:none;margin:0;padding:0}
.ficha li{display:grid;gap:var(--s-1);align-content:start;background:var(--c-paper);border:1px solid var(--c-line);border-top:4px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-3) var(--s-4);min-width:0}
.ficha li.is-wide{grid-column:1 / -1}
.ficha .k{margin:0}
.ficha b{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);line-height:1.1;letter-spacing:-.01em;overflow-wrap:anywhere}
.ficha b.abierto{font-size:var(--t-1)}
.ficha p{margin:0;font-size:var(--t-0);color:var(--c-muted)}
.ficha p.k{color:var(--c-accent)}
.ficha li.is-open{border-top-color:var(--c-gold);background:var(--c-secondary)}
.ficha li.is-open p.k{color:var(--c-muted)}
.momento h2{margin-bottom:var(--s-4)}

/* the season: the four posters on the wall */
.temporada{display:grid;gap:var(--s-4);list-style:none;margin:0;padding:0}
.temporada .poster{display:grid;gap:var(--s-3);align-content:start;padding:var(--s-6) var(--s-5);container-type:inline-size}
.poster__title{font-family:var(--f-display);font-size:min(var(--t-6),14cqi);font-stretch:96%;font-weight:850;line-height:.92;letter-spacing:-.03em;text-transform:uppercase;color:var(--c-paper);margin:0;text-wrap:balance}
.poster__title a{text-decoration:none;color:inherit}
.poster__title a:hover{text-decoration:underline;text-decoration-color:var(--c-accent);text-decoration-thickness:.06em;text-underline-offset:.1em}
.poster__who{font-family:var(--f-body);font-style:italic;font-size:var(--t-2);line-height:1.3;color:var(--c-secondary);margin:0}
.poster__menores{font-family:var(--f-display);font-stretch:86%;font-weight:700;font-size:var(--t-1);color:var(--c-paper);margin:0}
.poster .rule{margin:var(--s-2) 0}
.poster__cta{margin:var(--s-2) 0 0}
.poster__ganador{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);color:var(--c-paper);margin:0}

/* the steps of a sign-up, a sequence */
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);counter-reset:paso}
.pasos li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;border-top:1px solid var(--c-line);padding-top:var(--s-3)}
.pasos li::before{counter-increment:paso;content:counter(paso);font-family:var(--f-display);font-weight:800;font-stretch:80%;font-size:var(--t-2);line-height:1.1;color:var(--c-accent);min-width:1.2em}
.pasos div{min-width:0}
.pasos b{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-2);line-height:1.1;display:block;margin-bottom:var(--s-1)}
.pasos p{margin:0;color:var(--c-muted)}

/* the form */
.form{display:grid;gap:var(--s-5);max-width:var(--measure)}
.form fieldset{border:1px solid var(--c-line);border-top:4px solid var(--c-primary);border-radius:var(--r-a);padding:var(--s-3) var(--s-4) var(--s-5);margin:0;min-width:0;background:var(--c-paper)}
.form legend{font-family:var(--f-display);font-weight:800;font-stretch:86%;font-size:var(--t-2);letter-spacing:-.01em;padding:0 var(--s-2)}
.form__campos{display:grid;gap:var(--s-4);padding-top:var(--s-2)}
.campo{display:grid;gap:var(--s-1)}
.campo label{font-family:var(--f-display);font-stretch:82%;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-0);color:var(--c-muted)}
.campo input{font:inherit;font-size:var(--t-1);line-height:1.3;padding:.6em .7em;border:2px solid var(--c-line);border-radius:var(--r-a);background:var(--c-paper);color:var(--c-ink);width:100%;min-width:0}
.campo input:focus-visible{border-color:var(--c-primary)}
.campo small{font-size:var(--t-0);color:var(--c-muted);font-family:var(--f-display);font-stretch:88%}
.eco{font-family:var(--f-display);font-weight:800;font-stretch:88%;font-size:var(--t-3);letter-spacing:.06em;text-transform:uppercase;margin:var(--s-1) 0 0;color:var(--c-ink);overflow-wrap:anywhere}
.eco span{font-family:var(--f-body);font-weight:400;font-size:var(--t-0);letter-spacing:0;text-transform:none;color:var(--c-muted);display:block}
.marca{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-3);align-items:start;font-size:var(--t-1);cursor:pointer}
.marca input{width:1.25em;height:1.25em;margin:.2em 0 0;accent-color:var(--c-accent)}
.form__envio{display:grid;gap:var(--s-3);justify-items:start}
button.btn{cursor:pointer;appearance:none}
.btn[disabled]{cursor:not-allowed;background:var(--c-muted);border-color:var(--c-muted);color:var(--c-paper);transform:none}
.form .note,.pendiente{max-width:var(--measure)}
.pendiente{margin-bottom:var(--s-5)}

/* the day sheet */
.hoja .card p{margin:0}

@media (min-width:48em){
  .temporada{grid-template-columns:1fr 1fr}
  .pasos{grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .pasos li{border-top:2px solid var(--c-primary)}
  .ficha{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:60em){
  .momento{grid-template-columns:minmax(16rem,24rem) minmax(0,1fr);gap:var(--s-7)}
  .ficha{grid-template-columns:1fr 1fr}
  .caja{max-width:14rem}
  .temporada .poster{padding:var(--s-7) var(--s-6)}
}