/**
 * Layout System
 *
 * CSS Grid and Flexbox primitives. Mobile-first. Logical properties throughout.
 *
 * @package    Recipes_Lola
 * @version    1.0.0
 */

.rl-container { inline-size: 100%; max-inline-size: var(--rl-container-xl); margin-inline: auto; padding-inline: var(--rl-container-padding-x); }
.rl-container--xs  { max-inline-size: var(--rl-container-xs); }
.rl-container--sm  { max-inline-size: var(--rl-container-sm); }
.rl-container--md  { max-inline-size: var(--rl-container-md); }
.rl-container--lg  { max-inline-size: var(--rl-container-lg); }
.rl-container--xl  { max-inline-size: var(--rl-container-xl); }
.rl-container--2xl { max-inline-size: var(--rl-container-2xl); }
.rl-container--fluid { max-inline-size: none; }
.rl-container--prose { max-inline-size: var(--rl-prose-md); }

.rl-section     { padding-block: var(--rl-section-spacing-md); }
.rl-section--xs { padding-block: var(--rl-section-spacing-xs); }
.rl-section--sm { padding-block: var(--rl-section-spacing-sm); }
.rl-section--md { padding-block: var(--rl-section-spacing-md); }
.rl-section--lg { padding-block: var(--rl-section-spacing-lg); }
.rl-section--xl { padding-block: var(--rl-section-spacing-xl); }

.rl-grid { display: grid; grid-template-columns: repeat(var(--rl-grid-cols, 12), minmax(0, 1fr)); gap: var(--rl-grid-gap-y) var(--rl-grid-gap-x); }
.rl-col-1{grid-column:span 1}.rl-col-2{grid-column:span 2}.rl-col-3{grid-column:span 3}.rl-col-4{grid-column:span 4}
.rl-col-5{grid-column:span 5}.rl-col-6{grid-column:span 6}.rl-col-7{grid-column:span 7}.rl-col-8{grid-column:span 8}
.rl-col-9{grid-column:span 9}.rl-col-10{grid-column:span 10}.rl-col-11{grid-column:span 11}.rl-col-12{grid-column:span 12}
.rl-col-full { grid-column: 1 / -1; }

@media (min-width: 768px) {
  .rl-col-md-1{grid-column:span 1}.rl-col-md-2{grid-column:span 2}.rl-col-md-3{grid-column:span 3}.rl-col-md-4{grid-column:span 4}
  .rl-col-md-5{grid-column:span 5}.rl-col-md-6{grid-column:span 6}.rl-col-md-7{grid-column:span 7}.rl-col-md-8{grid-column:span 8}
  .rl-col-md-9{grid-column:span 9}.rl-col-md-10{grid-column:span 10}.rl-col-md-11{grid-column:span 11}.rl-col-md-12{grid-column:span 12}
}

@media (min-width: 1024px) {
  .rl-col-lg-1{grid-column:span 1}.rl-col-lg-2{grid-column:span 2}.rl-col-lg-3{grid-column:span 3}.rl-col-lg-4{grid-column:span 4}
  .rl-col-lg-5{grid-column:span 5}.rl-col-lg-6{grid-column:span 6}.rl-col-lg-7{grid-column:span 7}.rl-col-lg-8{grid-column:span 8}
  .rl-col-lg-9{grid-column:span 9}.rl-col-lg-10{grid-column:span 10}.rl-col-lg-11{grid-column:span 11}.rl-col-lg-12{grid-column:span 12}
}

.rl-layout-content-sidebar { display: grid; grid-template-columns: 1fr; gap: var(--rl-grid-gap-y) var(--rl-grid-gap-x); }
@media (min-width: 1024px) {
  .rl-layout-content-sidebar { grid-template-columns: 1fr var(--rl-sidebar-width); align-items: start; }
}
.rl-layout-content-sidebar__content { min-inline-size: 0; }
.rl-layout-content-sidebar__sidebar { position: sticky; inset-block-start: calc(var(--rl-header-height) + var(--rl-space-6)); }

.rl-recipe-grid { display: grid; grid-template-columns: 1fr; gap: var(--rl-space-6); }
@media (min-width: 640px)  { .rl-recipe-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rl-recipe-grid { grid-template-columns: repeat(3, 1fr); } }

.rl-recipe-grid--4 { display: grid; grid-template-columns: 1fr; gap: var(--rl-space-6); }
@media (min-width: 640px)  { .rl-recipe-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rl-recipe-grid--4 { grid-template-columns: repeat(4, 1fr); } }

.rl-flex { display: flex; } .rl-inline-flex { display: inline-flex; } .rl-flex-col { flex-direction: column; } .rl-flex-wrap { flex-wrap: wrap; }
.rl-items-start{align-items:flex-start}.rl-items-center{align-items:center}.rl-items-end{align-items:flex-end}.rl-items-baseline{align-items:baseline}
.rl-justify-start{justify-content:flex-start}.rl-justify-center{justify-content:center}.rl-justify-end{justify-content:flex-end}.rl-justify-between{justify-content:space-between}
.rl-flex-1{flex:1 1 0%}.rl-flex-auto{flex:1 1 auto}.rl-flex-none{flex:none}.rl-flex-shrink-0{flex-shrink:0}

.rl-gap-2{gap:var(--rl-space-2)}.rl-gap-3{gap:var(--rl-space-3)}.rl-gap-4{gap:var(--rl-space-4)}.rl-gap-5{gap:var(--rl-space-5)}
.rl-gap-6{gap:var(--rl-space-6)}.rl-gap-8{gap:var(--rl-space-8)}.rl-gap-10{gap:var(--rl-space-10)}.rl-gap-12{gap:var(--rl-space-12)}

.rl-stack > * + * { margin-block-start: var(--rl-space-4); }
.rl-stack--2 > * + * { margin-block-start: var(--rl-space-2); }
.rl-stack--3 > * + * { margin-block-start: var(--rl-space-3); }
.rl-stack--6 > * + * { margin-block-start: var(--rl-space-6); }
.rl-stack--8 > * + * { margin-block-start: var(--rl-space-8); }

.rl-aspect-square{aspect-ratio:1/1}.rl-aspect-video{aspect-ratio:16/9}.rl-aspect-4-3{aspect-ratio:4/3}
.rl-aspect-3-2{aspect-ratio:3/2}.rl-aspect-portrait{aspect-ratio:3/4}.rl-aspect-og{aspect-ratio:1200/630}

.rl-divider { border: none; border-block-start: var(--rl-border-width) solid var(--rl-color-border); margin-block: var(--rl-space-8); }
.rl-divider--strong { border-block-start-color: var(--rl-color-border-strong); }

.rl-sticky-below-header { position: sticky; inset-block-start: calc(var(--rl-header-height) + var(--rl-space-4)); }