/*
 * Layout Styles
 *
 * This file defines structural layouts, including the container class,
 * grid utilities, and responsive breakpoints.
 */

 :root{
  --container-max: 1360px;

  /* padding base del container */
  --container-pad-desktop: 20px;
  --container-pad-mobile: 20px;

  /* padding EXTRA del "inner" per donar aire als costats */
  --container-inner-pad-desktop: 100px; /* <-- això és el que demanes */
  --container-inner-pad-mobile: 0px;    /* en mòbil normalment no cal */
}

/* =========================
   CONTAINERS
   ========================= */

/* Outer container (el que ja tens) */
.container{
  width: min(var(--container-max), 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad-mobile);
  padding-right: var(--container-pad-mobile);
}

@media (min-width: 768px){
  .container{
    padding-left: var(--container-pad-desktop);
    padding-right: var(--container-pad-desktop);
  }
}

/* Inner container (nou): afegeix aire extra sense tocar amplades */
.container-inner{
  padding-left: var(--container-inner-pad-mobile);
  padding-right: var(--container-inner-pad-mobile);
}

@media (min-width: 1024px){
  .container-inner{
    padding-left: var(--container-inner-pad-desktop);
    padding-right: var(--container-inner-pad-desktop);
  }
}

/*
  OPCIONAL: variant per pàgines/sections concretes
  Si 100px és massa per alguns llocs, pots aplicar:
  <div class="container"><div class="container-inner container-inner--md">...</div></div>
*/
.container-inner--md{
  padding-left: 40px;
  padding-right: 40px;
}
@media (min-width: 1024px){
  .container-inner--md{
    padding-left: 72px;
    padding-right: 72px;
  }
}

/* =========================
   SITE MAIN PADDING (IMPORTANT)
   ========================= */

/*
  Ara mateix tens padding a .site-main i també a .container,
  i després el “anul·les” amb .site-main .container{padding:0}.
  Això complica molt tot.

  Recomanació: deixa .site-main SENSE padding i controla-ho amb .container.
*/
.site-main{
  padding-left: 0;
  padding-right: 0;
}

/* Elimina aquest hack antic (ja no cal):
.site-main .container{
  padding-left: 0;
  padding-right: 0;
}
*/

/* =========================
   GRID SYSTEM
   ========================= */

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

.col {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  flex: 1 0 0;
}

/* =========================
   CONTENT + SIDEBAR LAYOUT
   ========================= */

.content-area {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .content-area {
    flex-direction: row;
  }
  .content-area-main {
    flex: 0 0 70%;
  }
  .widget-area {
    flex: 0 0 30%;
  }
}