/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Design components */
.plf-card {
	background: var(--white);
	border-radius: var(--radius-s);
	padding: var(--space-s);
	gap: var(--space-xs);
    --row-gap: var(--space-xs);
    --col-gap: var(--space-xs);
    --grid-gap: var(--space-xs);
}

.plf-card-element-wrapper {
	background: var(--base-dark-trans-10);
    border-radius: var(--radius-s);
	padding: 10px;
}


/* LEAGUE STANDINGS TABLES */
/* Outer wrapper */
.standings-table {
  width: 100%;
  font-size: 15px;
}

/* Header + row layout */
.standings-head,
.standings-row {
  display: grid;
  grid-template-columns:
    1fr    /* # */
    5fr    /* Klub */
    1fr    /* K */
    1fr    /* V */
    1fr    /* U */
    1fr    /* T */
    1.4fr  /* M (X:Y) */
    1.4fr  /* MF (goal diff) */
    1.5fr  /* P */
  ;
  gap: 0.5rem;
  padding: 0.6rem 0;
  align-items: center;
  text-align: center; /* default: center everything */
}

/* Header */
.standings-head {
  font-weight: 700;
  border-bottom: 2px solid #eee;
  color: #555;
}

/* Rows */
.standings-row {
  border-bottom: 1px solid #eee;
}

.standings-row:nth-child(even) {
  background: rgba(0, 0, 0, 0.015);
}

/* KLUB column (2nd) left-aligned + logo + name */
.standings-head > *:nth-child(2),
.standings-row > *:nth-child(2) {
  text-align: left;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow: hidden;
}

/* # column stronger (optional) */
.standings-row > *:nth-child(1) {
  font-weight: 600;
}

/* Points column bold */
.standings-row > *:last-child {
  font-weight: 700;
}

/* Logos */
.standings-row img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

/* ===================== */
/*       MOBILE          */
/* ===================== */

@media (max-width: 480px) {
  .standings-head,
  .standings-row {
    /* Drop MF column from the grid on mobile */
    grid-template-columns:
      1fr    /* # */
      4fr    /* Klub */
      1fr    /* K */
      1fr    /* V */
      1fr    /* U */
      1fr    /* T */
      1.4fr  /* M (X:Y) */
      1.5fr  /* P */
    ;
    gap: 0.35rem;
    font-size: 13px;
  }

  /* Hide MF (8th column) on mobile: header + rows */
  .standings-head > *:nth-child(8),
  .standings-row > *:nth-child(8) {
    display: none;
  }

  .standings-row img {
    width: 18px;
    height: 18px;
  }
}








/* 3-col layout: fixed center + fixed rails + center the whole thing */
.layout-3col{
  width: 100%;
  display: grid;
  justify-content: center;              /* keeps the whole “block” centered */
  column-gap: 24px;
  grid-template-columns: 300px 860px 300px; /* AD | CONTENT | AD */
  align-items: start;
}

/* keep content from stretching */
.layout-3col .main{
  width: 100%;
  max-width: 860px;
}

/* optional: sticky side rails */
.layout-3col .rail{
  position: sticky;
  top: 96px; /* set to your header height */
}


/* responsive: drop siderails on smaller screens */
@media (max-width: 1600px){
  .layout-3col{
    grid-template-columns: 1fr 860px 1fr; /* keep center fixed, rails become “margins” */
  }
  .layout-3col .rail{
    display: block;
  }
}

@media (max-width: 920px){
  .layout-3col{
    grid-template-columns: 1fr;   /* single column on mobile */
    justify-content: stretch;
  }
  .layout-3col .main{
    max-width: 100%;
  }
}