/* ==========================================================
   ### RESPONSIVE GRIDS ###
   Structural column layouts only.

   grid-1 / grid-2 / grid-3 / grid-4 / grid-6 define how direct
   children are arranged. Content styling belongs to the
   individual child blocks, not to the grid itself.
   ========================================================== */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-6 {
    display: grid;
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--content-padding);

    gap: 1.5rem;
    box-sizing: border-box;
}

.grid-1 {
    grid-template-columns: 1fr;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-1 > *,
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.grid-6 > * {
    min-width: 0;
}


/* ----------------------------------------------------------
   Grid Stacking Order
   Optional modifier for a two-column grid.
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .grid-2.u-StackRightFirst > :first-child {
        order: 2;
    }

    .grid-2.u-StackRightFirst > :nth-child(2) {
        order: 1;
    }
}


/* ----------------------------------------------------------
   Responsive Grid Columns
   ---------------------------------------------------------- */

@media (max-width: 1200px) {

    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-6 {
        gap: 1rem;
    }

    .grid-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 840px) {

    .grid-4,
    .grid-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {

    .grid-4,
    .grid-6 {
        grid-template-columns: 1fr;
    }
}
/* ----------------------------------------------------------
   Flow Grid
   Continuous collection grid:
   3 columns desktop
   2 columns tablet / small screens
   1 column very small screens
   ---------------------------------------------------------- */

.grid-flow {
    display: grid;
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--content-padding);

    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;

    box-sizing: border-box;
}

.grid-flow > * {
    min-width: 0;
}


@media (max-width: 1200px) {

    .grid-flow {
        gap: 1rem;
    }
}


@media (max-width: 800px) {

    .grid-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 400px) {

    .grid-flow {
        grid-template-columns: 1fr;
    }
}

/* ================= RESPONSIVE GRIDS END =================== */

/* ==========================================================
   ### CONTENT PRESENTATION ###
   Reusable spacing treatments for individual content blocks.

   Image and text blocks use the same inset scale.
   Text receives a small additional inset for better visual balance.

   These classes do not create grid structure and do not assign colour.
   ========================================================== */

:root {
    --inset-small: 26px;
    --inset-deep: 49px;
    --inset-spacious: clamp(4rem, 10vw, 12rem);

    --text-inset-extra: 40px;
    --text-shift: 30px;
}


/* ----------------------------------------------------------
   Image Blocks
   Apply these classes to the DIV containing the image.

   u-ImageInset      = standard inset
   u-ImageDeep       = deeper inset
   u-ImageSpacious   = very generous inset
   u-ImageFull       = no inset
   ---------------------------------------------------------- */

.u-ImageInset,
.u-ImageDeep,
.u-ImageSpacious,
.u-ImageFull {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}

.u-ImageInset {
    padding: var(--inset-small);
}

.u-ImageDeep {
    padding: var(--inset-deep);
}

.u-ImageSpacious {
    padding: var(--inset-spacious);
}

.u-ImageFull {
    padding: 0;
}


/* Direct image OR linked image */

.u-ImageInset > img,
.u-ImageDeep > img,
.u-ImageSpacious > img,
.u-ImageFull > img,
.u-ImageInset > a > img,
.u-ImageDeep > a > img,
.u-ImageSpacious > a > img,
.u-ImageFull > a > img {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
}


/* Link around an image should behave like the image box */

.u-ImageInset > a:has(> img),
.u-ImageDeep > a:has(> img),
.u-ImageSpacious > a:has(> img),
.u-ImageFull > a:has(> img) {
    display: block;
    width: 100%;
}
/* ----------------------------------------------------------
   Image Inset with Heading
   Let the heading use the full grid-cell width while the
   image itself keeps its inset.
   ---------------------------------------------------------- */

.grid-1 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child),
.grid-2 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child),
.grid-3 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child),
.grid-4 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child),
.grid-6 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child),
.grid-flow :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious):has(> h1:first-child, > h2:first-child, > h3:first-child, > h4:first-child, > h5:first-child, > h6:first-child) {
    padding-top: 0;
}

.grid-1 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child,
.grid-2 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child,
.grid-3 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child,
.grid-4 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child,
.grid-6 :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child,
.grid-flow :is(.u-ImageInset, .u-ImageDeep, .u-ImageSpacious) > :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-left: calc(-1 * var(--image-box-inset));
    margin-right: calc(-1 * var(--image-box-inset));
    margin-bottom: .5rem;
}


/* ----------------------------------------------------------
   Text Blocks
   Matching inset levels for text.

   Text is deliberately inset slightly more than the matching
   image block through --text-inset-extra.
   ---------------------------------------------------------- */

.u-TextInset,
.u-TextDeep,
.u-TextSpacious {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
}

.u-TextInset {
    --block-inset: calc(var(--inset-small) + var(--text-inset-extra));
}

.u-TextDeep {
    --block-inset: calc(var(--inset-deep) + var(--text-inset-extra));
}

.u-TextSpacious {
    --block-inset: calc(var(--inset-spacious) + var(--text-inset-extra));
}

.u-TextInset,
.u-TextDeep,
.u-TextSpacious {
    padding: var(--block-inset);
}

.u-TextInset > :first-child,
.u-TextDeep > :first-child,
.u-TextSpacious > :first-child {
    margin-top: 0;
}

.u-TextInset > :last-child,
.u-TextDeep > :last-child,
.u-TextSpacious > :last-child {
    margin-bottom: 0;
}

.u-TextInset > ul,
.u-TextInset > ol,
.u-TextDeep > ul,
.u-TextDeep > ol,
.u-TextSpacious > ul,
.u-TextSpacious > ol {
    padding-left: 1.5em;
}


/* ----------------------------------------------------------
   Text Shift
   Redistributes existing horizontal padding without moving
   the block outside its normal layout box.
   ---------------------------------------------------------- */

.u-TextInset.u-ShiftLeft,
.u-TextDeep.u-ShiftLeft,
.u-TextSpacious.u-ShiftLeft {
    padding-left: calc(var(--block-inset) - var(--text-shift));
    padding-right: calc(var(--block-inset) + var(--text-shift));
}

.u-TextInset.u-ShiftRight,
.u-TextDeep.u-ShiftRight,
.u-TextSpacious.u-ShiftRight {
    padding-left: calc(var(--block-inset) + var(--text-shift));
    padding-right: calc(var(--block-inset) - var(--text-shift));
}


/* ----------------------------------------------------------
   Content Presentation — Mobile
   Once grid columns stack, the desktop image/text relationship
   is no longer needed. Keep mobile spacing simple.
   ---------------------------------------------------------- */

@media (max-width: 768px) {

    .u-ImageInset,
    .u-ImageDeep,
    .u-ImageSpacious,
    .u-ImageFull {
        padding: 0;
    }

    .u-TextInset,
    .u-TextDeep,
    .u-TextSpacious,
    .u-TextInset.u-ShiftLeft,
    .u-TextDeep.u-ShiftLeft,
    .u-TextSpacious.u-ShiftLeft,
    .u-TextInset.u-ShiftRight,
    .u-TextDeep.u-ShiftRight,
    .u-TextSpacious.u-ShiftRight {
        padding: 1.75rem var(--content-padding);
    }
}

/* =============== CONTENT PRESENTATION END ================ */

/* ==========================================================
   ### COMMENT BLOCK ###
   Spacious full-width layout for highlighted information,
   offers, notices etc. Colour is assigned separately.
   ========================================================== */

.u-CommentBlock {
    width: 100%;

    margin: 30px 0;
    padding: 68px 30px;

}

.u-CommentBlock > :first-child {
    margin-top: 0;
}

.u-CommentBlock > :last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {

    .u-CommentBlock {
        padding: 20px 15px;
    }
}
/* ----------------------------------------------------------
   Comment Block — Inner Content Alignment

   The visual block/background may be wider than the article,
   while readable content remains aligned with article text.
   ---------------------------------------------------------- */

.u-CommentBlock > p,
.u-CommentBlock > h1,
.u-CommentBlock > h2,
.u-CommentBlock > h3,
.u-CommentBlock > h4,
.u-CommentBlock > h5,
.u-CommentBlock > h6,
.u-CommentBlock > blockquote {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}

.u-CommentBlock > ul,
.u-CommentBlock > ol {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: calc(var(--content-padding) + 1.5em);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}


/* Grids inside a Comment Block remain article-aligned. */

.u-CommentBlock > .grid-1,
.u-CommentBlock > .grid-2,
.u-CommentBlock > .grid-3,
.u-CommentBlock > .grid-4,
.u-CommentBlock > .grid-6 {
    max-width: var(--article-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* ============== COMMENT BLOCK ALIGNMENT END ============== */

/* ==================== COMMENT BLOCK END =================== */

/* ==========================================================
   ### TEXT PRESENTATION ###
   Typography only. No colour or background belongs here.
   These may be applied to paragraphs, headings or spans.
   ========================================================== */

.u-TextComment {
    font-family: var(--font-main);
    font-style: italic;
    font-weight: 400;
}

.u-TextQuote,
.u-Quote {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.15em;
    line-height: 1.6;
}

/* u-Quote is a temporary compatibility alias while old content
   and the TinyMCE command are migrated to u-TextQuote. */

/* ================= TEXT PRESENTATION END ================== */

/* ==========================================================
   ### INFO BLOCK ###
   Small scan-friendly information block.

   Works standalone or as a direct child of a grid.
   ========================================================== */

.u-InfoBlock {
    width: 100%;
    max-width: var(--article-max-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--content-padding);
    padding-right: var(--content-padding);

    box-sizing: border-box;
}

.u-InfoBlock > :first-child {
    margin-top: 0;
    margin-bottom: 0;

    padding: 0 0 .6rem;

    font-size: 1.15rem;
    font-weight: 600;

    border-bottom: 1px solid currentColor;
}

.u-InfoBlock p {
    margin: .8rem 0 0;
    padding: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------
   Info Block Inside a Grid

   The grid already provides the outer article padding,
   so don't add it again to each individual grid cell.
   ---------------------------------------------------------- */

.grid-1 > .u-InfoBlock,
.grid-2 > .u-InfoBlock,
.grid-3 > .u-InfoBlock,
.grid-4 > .u-InfoBlock,
.grid-6 > .u-InfoBlock {
    max-width: none;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ===================== INFO BLOCK END ===================== */

/* ==========================================================
   ### SMARTER IMAGE FLOAT ###
   Images float normally while usable text width remains.

   Frontend JS adds .no-float when remaining text width
   becomes too small, centring the image instead.
   ========================================================== */

img.no-float {
    float: none !important;
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
}

img.float-start {
    margin: 0 3rem 1rem 1rem;
}

img.float-end {
    margin: 0 1rem 1rem 3rem;
}


/* --- Keep Floated Images Responsive --- */

img.float-start,
img.float-end {
    max-width: 100%;
    height: auto;
}

/* ================= SMARTER IMAGE FLOAT END ================ */

/* ==========================================================
   ### IMAGE OVERLAYS ###
   Short headings or comments placed over an image.
   Intended for brief content only.
   ========================================================== */

.u-ImageOverlay {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.u-ImageOverlay > img {
    display: block;
    width: 100%;
    height: auto;
}


/* ----------------------------------------------------------
   Overlay Positions
   ---------------------------------------------------------- */

.u-OverlayTopCenter {
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.u-OverlayTopLeft {
    top: 18%;
    left: 12%;
}

.u-OverlayTopRight {
    top: 18%;
    right: 12%;
    text-align: right;
}

.u-OverlayBottomLeft {
    bottom: 18%;
    left: 12%;
}

.u-OverlayBottomRight {
    right: 12%;
    bottom: 18%;
    text-align: right;
}

.u-OverlayBottomCenter {
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}


/* ----------------------------------------------------------
   Overlay Content
   Spacing and layout for headings/comments over images.
   Background colours may be added through editor classes.
   ---------------------------------------------------------- */

.u-OverlayContent {
    position: absolute;
    max-width: 55%;

    padding: var(--content-padding);
    border-radius: 0.4rem;

    box-sizing: border-box;
}


/* --- Overlay text spacing --- */

.u-OverlayContent > h1,
.u-OverlayContent > h2,
.u-OverlayContent > h3,
.u-OverlayContent > p {
    margin-top: 0;
    margin-bottom: 0;
}


/* --- Multiple elements inside one overlay --- */

.u-OverlayContent > * + * {
    margin-top: 0.45em;
}


/* ----------------------------------------------------------
   Overlay Text Sizes
   Visual size is controlled entirely by the editor classes.
   h1 / h2 / h3 remain semantic only.
   ---------------------------------------------------------- */

.u-OverlayTextSmall {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.u-OverlayTextMedium {
    font-size: clamp(2.4rem, 4.5vw, 4.8rem);
}

.u-OverlayTextLarge {
    font-size: clamp(3rem, 6vw, 6.5rem);
}

.u-OverlayTextSmall,
.u-OverlayTextMedium,
.u-OverlayTextLarge {
    line-height: 1.05;
}


/* --- Display font for overlay headings --- */

.u-ImageOverlay h1,
.u-ImageOverlay h2,
.u-ImageOverlay h3 {
    font-family: var(--font-display);
}

/* ==================== IMAGE OVERLAYS END ==================== */

/* ==========================================================
   ### BUTTONS ###
   Current approved u-Button link style.
   ========================================================== */

.u-Button {
    display: inline-block;

    padding: 0.35em 1.1em;

    border: 1px solid var(--color-button-border);
    border-radius: 0.5em;

    background: var(--color-button-bg);
    color: var(--color-text-dark);

    text-decoration: none;
    line-height: 1.2;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.u-Button:hover,
.u-Button:focus {
    background: var(--color-button-hover-bg);
    color: var(--color-button-hover-text);
    border-color: var(--color-button-hover-border);

    text-decoration: none;
}
/* ----------------------------------------------------------
   Button = Highlighted Link
   Ordinary text link displayed in a simple box with arrow.
   ---------------------------------------------------------- */

a.btn-link {
    display: inline-flex;
    align-items: center;
    gap: .65em;

    padding: .4em .7em .4em .9em;

    /* border: 1px solid currentColor;
    border-radius: .35rem; */

    text-decoration: none;
}

a.btn-link::after {
    content: "";

    display: block;
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;

    background: url("/images/base/btn-arrow.svg") center / contain no-repeat;
    transition: transform .2s ease;
}

a.btn-link:hover::after,
a.btn-link:focus::after {
    transform: translateX(.25em);
}

/* END Highlighted Link */

/* ======================= BUTTON END ====================== */

/* ==========================================================
   ### Modals  ###
   Adjusting display style just a wee bit
   ========================================================== */
[data-modals-element="modal"] [data-modals-element="slides"] {
    width: calc(100% - 30px);
    max-width: 900px;
    margin: auto;
}
[data-modals-element=modal] [data-modals-element=overlay] {
    background-color: rgb(0 0 0 / 7%);
}
/* ======================== Modals END ======================= */

/* ==========================================================
   ### FORMS ###
   Reserved for form-specific rules.
   ========================================================== */


/* ======================== FORMS END ======================= */

/* ==========================================================
   YOGA TIMETABLE
   HTML fragments served by CakePHP
   ========================================================== */

/* Shared class level colours */

.lv1   { background-color: #f0e2dd; }
.lv1-2 { background-color: #debfb4; }
.lv2   { background-color: #bedeb4; }
.lv2-3 { background-color: #6fa8a6; }
.lv_p  { background-color: #b4dbde; }


/* ----------------------------------------------------------
   Today & Tomorrow — Featured Schedule
   ---------------------------------------------------------- */

.yoga-todaymorrow {
    width: 100%;
    max-width: 600px;
    margin: 0 auto 2rem;
    font: 17px Arial, Helvetica, sans-serif;
    color: #222;
}

.featured-day {
    margin-bottom: 18px;
}

.featured-day h3 {
    background: #a6a6a6;
    color: #333;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
    padding: 8px 12px;
    margin: 0;
    font-size: 19px;
}

.featured-day h3 small {
    display: inline;
    font-size: 14px;
    font-weight: normal;
    margin-left: 8px;
}

.featured-class {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-bottom: 1px solid #222;
}

.featured-time {
    flex: 0 0 58px;
    font-weight: bold;
}

.featured-description {
    flex: 1;
    min-width: 0;
}

.featured-title {
    font-size: 18px;
    font-weight: bold;
}

.featured-teacher {
    margin-top: 4px;
    font-size: 16px;
}

.featured-description sup {
    font-size: 12px;
}

.featured-muted {
    color: #666;
    opacity: .65;
}

.featured-status {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin-left: 8px;
}

.featured-empty {
    padding: 12px;
    color: #777;
    border-bottom: 1px solid #222;
}


/* ----------------------------------------------------------
   Regular Schedule — Compact Timetable
   ---------------------------------------------------------- */

.yoga-schedule {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font: 14px Arial, Helvetica, sans-serif;
    color: #222;
}

.yoga-schedule h3 {
    text-align: center;
    color: #808080;
    font-size: 17px;
    margin: 10px 0;
}

.yoga-schedule .schedule-table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font: 14px Arial, Helvetica, sans-serif;
}

.yoga-schedule .schedule-table td {
    padding: 3px 3px 2px;
    line-height: 1.15;
    vertical-align: middle;
    border-bottom: 1px solid #222;
}

.yoga-schedule .schedule-time {
    width: 43px;
    text-align: right;
    white-space: nowrap;
    padding-right: 8px;
}

.yoga-schedule .schedule-class {
    text-align: left;
}

.yoga-schedule .schedule-gap td {
    height: 8px;
    padding: 0;
    border: 0;
    background: none;
}

.yoga-schedule .schedule-day th {
    background: #a6a6a6;
    color: #333;
    text-align: left;
    font: bold 15px Arial, Helvetica, sans-serif;
    padding: 4px 8px;
    border-top: 2px solid #222;
    border-bottom: 1px solid #222;
}

.yoga-schedule .not-running {
    color: #666;
    opacity: .65;
}


/* ----------------------------------------------------------
   Level Legend
   ---------------------------------------------------------- */

.yoga-schedule .level-legend {
    display: flex;
    border-left: 1px solid #333;
    margin-bottom: 12px;
}

.yoga-schedule .level-legend span {
    flex: 1;
    padding: 5px 2px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #333;
    border-left: 0;
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 600px) {
    .yoga-todaymorrow {
        /* max-width: 350px; */
        font-size: 14px;
    }

    .featured-class {
        padding: 8px 6px;
        gap: 8px;
    }

    .featured-time {
        flex-basis: 48px;
    }

    .featured-title {
        font-size: 16px;
    }

    .featured-teacher {
        font-size: 14px;
    }
}