/**

@file

Page layout.

Responsive page layout:

Mobile:

content

sidebar


Large tablet:

content (2/3) | sidebar (1/3)


Desktop:

content (3/4) | sidebar (1/4)


The page layout does NOT create columns inside .page-content.

Components such as Views are responsible for their own layouts.
*/

/* --------------------------------------------------------------------------

Page wrapper

-------------------------------------------------------------------------- */

.page-wrapper {
/*

90rem = 1440px.
*/
--content-width: 90rem;

/*

Preserve the original theme gutter.
*/
--gutter: var(--space-m);

/*

Gap between the main content region and sidebar.
*/
--layout-gap: clamp(1rem, 2vw, 2rem);

max-inline-size: var(--content-width);
margin-inline: auto;

background: var(--surface);
box-shadow: var(--shadow);
}

/* --------------------------------------------------------------------------

Header

-------------------------------------------------------------------------- */

.page-header {
background: var(--header-bg);
color: var(--header-text);
}

.page-header a {
color: currentColor;
}

.page-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
padding: var(--space-s) var(--gutter);
}

.branding {
display: flex;
align-items: center;
gap: var(--space-s);
min-inline-size: 0;
}

.branding__logo img {
display: block;
block-size: auto;
max-block-size: 3.5rem;
}

.branding__name {
margin: 0;
font-family: var(--font-display);
font-size: var(--step-3);
line-height: 1.1;
}

.branding__name a {
text-decoration: none;
}

.branding__slogan {
margin: 0;
color: color-mix(in srgb, var(--header-text) 75%, transparent);
font-size: var(--step--1);
}

/* --------------------------------------------------------------------------

Main page layout

-------------------------------------------------------------------------- */

/*

Mobile:

The content and sidebar are stacked.
*/
.page-main {
display: grid;

grid-template-columns: minmax(0, 1fr);

gap: var(--layout-gap);
padding: var(--layout-gap);

align-items: start;
}

/*

IMPORTANT:

The page layout controls the width of .page-content only.

.page-content itself is NOT a grid and does NOT establish columns.
*/
.page-content {
display: block;

min-inline-size: 0;
inline-size: 100%;
}

.page-sidebar {
min-inline-size: 0;
}

/* --------------------------------------------------------------------------

Small tablets

-------------------------------------------------------------------------- */

/*

Continue stacking the page regions.

This gives small tablets the full available width for the main article.
*/
@media (min-width: 40rem) {
.page-main {
grid-template-columns: minmax(0, 1fr);
}
}

/* --------------------------------------------------------------------------

Large tablets

-------------------------------------------------------------------------- */

/*

Two actual page regions:

2/3 content | 1/3 sidebar

There are only TWO grid tracks here.
*/
@media (min-width: 55rem) {
.page-main {
grid-template-columns:
minmax(0, 2fr)
minmax(0, 1fr);
}
}

/* --------------------------------------------------------------------------

Desktop

-------------------------------------------------------------------------- */

/*

Two actual page regions:

3/4 content | 1/4 sidebar

There are only TWO grid tracks here.
*/
@media (min-width: 72rem) {
.page-main {
grid-template-columns:
minmax(0, 3fr)
minmax(0, 1fr);
}
}

/* --------------------------------------------------------------------------

Pages without a sidebar

-------------------------------------------------------------------------- */

.page-main:not(:has(.page-sidebar)) {
grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------

Sidebar

-------------------------------------------------------------------------- */

.page-sidebar {
min-inline-size: 0;
container-type: inline-size;
}

/* --------------------------------------------------------------------------

Secondary content

-------------------------------------------------------------------------- */

.page-secondary {
padding: var(--gutter);
border-block-start: 1px solid var(--border);
background: var(--surface-sunken);
}

.page-secondary__inner {
display: grid;

grid-template-columns:
repeat(
auto-fill,
minmax(min(20rem, 100%), 1fr)
);

gap: var(--layout-gap);
}

/* --------------------------------------------------------------------------

Footer

-------------------------------------------------------------------------- */

.page-footer {
padding: var(--space-l) var(--gutter);
background: var(--footer-bg);
color: var(--footer-text);
}

.page-footer a {
color: currentColor;
}

.page-footer__inner {
display: grid;

gap: var(--space-l);

grid-template-columns:
repeat(
auto-fit,
minmax(min(16rem, 100%), 1fr)
);
}

/* --------------------------------------------------------------------------

In-node image placement

-------------------------------------------------------------------------- */

.node--image-medium .field--name-field-image {
float: inline-end;

inline-size: min(300px, 45%);

margin: 0 0 var(--space-s) var(--space-s);
}

.node--image-banner .field--name-field-image img {
inline-size: 100%;
}

@media (max-width: 34rem) {
.node--image-medium .field--name-field-image {
float: none;

inline-size: 100%;

margin-inline: 0;


}
}

.views-view-grid.horizontal {
  display: grid;
  gap: var(--layout-gap);
}

.views-view-grid.horizontal .views-row {
  display: grid;
  gap: var(--layout-gap);
}

/*
 * Drupal Views adds inline widths such as width: 50%.
 * Let CSS Grid control the column widths instead.
 */
.views-view-grid.horizontal .views-col {
  width: auto !important;
}

/* 1 column */
.views-view-grid.horizontal.cols-1 .views-row {
  grid-template-columns: minmax(0, 1fr);
}

/* 2 columns */
.views-view-grid.horizontal.cols-2 .views-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 3 columns */
.views-view-grid.horizontal.cols-3 .views-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 4 columns */
.views-view-grid.horizontal.cols-4 .views-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}