/* =========================================================
   SoftTwinPlus 1.0 - layout.css
   Page structure: full-bleed shell, content grid, header shell.
   ========================================================= */

/* ---------------------------------------------------------
   1. Layout shell
   --------------------------------------------------------- */
/* Full-bleed shell: color bands span the viewport, .row keeps
   the readable content width and horizontal gutters. */
#outer-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* .container is declared before .row on purpose: it resets the
   padding that .row then re-applies as a gutter. */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.row {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

#content-wrapper {
  padding-block: clamp(20px, 3.4vw, 44px);
}
#content-wrapper > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(272px, 320px);
  align-items: start;
  gap: clamp(20px, 2.6vw, 34px);
}

#main-wrapper,
#sidebar-wrapper {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  overflow: visible;
}
#main-wrapper { display: flex; flex-direction: column; gap: var(--widget-gap); }
/* Leftover float clearers from the old layout: in a flex column they become
   zero-height flex items and add a phantom gap on both sides. */
#main-wrapper > .clearfix,
#sidebar-wrapper > .clearfix { display: none; }
#main-wrapper > .main {
  display: flex;
  flex-direction: column;
  gap: var(--widget-gap);
  min-width: 0;
}
#sidebar-wrapper { display: flex; flex-direction: column; gap: var(--widget-gap); }
#sidebar-wrapper > .sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--widget-gap);
  min-width: 0;
}

/* ---------------------------------------------------------
   2. Header: logo + ad row
   --------------------------------------------------------- */
#header-wrap { padding: 0; }

.header-header { padding-block: clamp(12px, 2vw, 20px); }
.header-header > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.header-logo { float: none; flex: 0 0 auto; max-width: 240px; margin: 0; padding: 0; }
.header-logo .widget { margin: 0; }
.header-logo img,
.header-logo .header-image-wrapper img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
}
.header-logo h1 { font-size: 23px; margin: 0; }
.header-logo h1 a { color: var(--ui-heading); }

.header-ads {
  float: none;
  flex: 1 1 320px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  margin: 0;
  max-width: 100%;
}
.header-ads .widget { margin: 0; }
.header-ads img,
.header-ads iframe {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 96px;
  border-radius: var(--radius-sm);
}