/* ============================================================
   TELEPATHYLIVE — Grid System
   Flexbox-based, 1280px, LTR
   ============================================================ */

/* --- Reset & Normalize --- */
*, *::before, *::after { box-sizing: border-box; }

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code, del, dfn, em, img, ins, q,
small, strong, sub, sup, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td {
    border: 0; margin: 0; padding: 0;
}

article, aside, figure, figcaption, footer,
header, main, nav, section, video, object { display: block; }

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body { margin: 0; }

img, object, embed { max-width: 100%; }
img { height: auto; display: block; }
a img { border: 0; }
figure { position: relative; }
figure img { width: 100%; }

/* --- CSS Variables --- */
:root {
    --font-heading: 'Cinzel', serif;
    --font-body: 'Cormorant Garamond', serif;
    --container-width: 1280px;
    --container-wide-width: 1400px;
    --gutter: 10px;
    --color-text: #1a1a1a;
    --color-bg: #ffffff;
    --color-accent: #8B6914;
}

/* --- Containers --- */
.container12,
.container16,
.full {
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
    max-width: var(--container-width);
}

.container-wide {
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    width: 100%;
    max-width: var(--container-wide-width);
}

/* --- Row --- */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

/* --- Columns (Flexbox) --- */
.column1, .column2, .column3, .column4,
.column5, .column6, .column7, .column8,
.column9, .column10, .column11, .column12,
.column13, .column14, .column15, .column16,
.free, .half, .third, .quarter, .fifth,
.sixth, .eight, .ninth, .tenth {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    min-width: 0;
}

/* Container12 Columns */
.container12 .column1  { width: calc(100% * 1  / 12); }
.container12 .column2  { width: calc(100% * 2  / 12); }
.container12 .column3  { width: calc(100% * 3  / 12); }
.container12 .column4  { width: calc(100% * 4  / 12); }
.container12 .column5  { width: calc(100% * 5  / 12); }
.container12 .column6  { width: calc(100% * 6  / 12); }
.container12 .column7  { width: calc(100% * 7  / 12); }
.container12 .column8  { width: calc(100% * 8  / 12); }
.container12 .column9  { width: calc(100% * 9  / 12); }
.container12 .column10 { width: calc(100% * 10 / 12); }
.container12 .column11 { width: calc(100% * 11 / 12); }
.container12 .column12 { width: 100%; }

/* Container16 Columns */
.container16 .column1  { width: calc(100% * 1  / 16); }
.container16 .column2  { width: calc(100% * 2  / 16); }
.container16 .column3  { width: calc(100% * 3  / 16); }
.container16 .column4  { width: calc(100% * 4  / 16); }
.container16 .column5  { width: calc(100% * 5  / 16); }
.container16 .column6  { width: calc(100% * 6  / 16); }
.container16 .column7  { width: calc(100% * 7  / 16); }
.container16 .column8  { width: calc(100% * 8  / 16); }
.container16 .column9  { width: calc(100% * 9  / 16); }
.container16 .column10 { width: calc(100% * 10 / 16); }
.container16 .column11 { width: calc(100% * 11 / 16); }
.container16 .column12 { width: calc(100% * 12 / 16); }
.container16 .column13 { width: calc(100% * 13 / 16); }
.container16 .column14 { width: calc(100% * 14 / 16); }
.container16 .column15 { width: calc(100% * 15 / 16); }
.container16 .column16 { width: 100%; }

/* Prefix (push) — Container12 */
.container12 .prefix1  { margin-left: calc(100% * 1  / 12); }
.container12 .prefix2  { margin-left: calc(100% * 2  / 12); }
.container12 .prefix3  { margin-left: calc(100% * 3  / 12); }
.container12 .prefix4  { margin-left: calc(100% * 4  / 12); }
.container12 .prefix5  { margin-left: calc(100% * 5  / 12); }
.container12 .prefix6  { margin-left: calc(100% * 6  / 12); }
.container12 .prefix7  { margin-left: calc(100% * 7  / 12); }
.container12 .prefix8  { margin-left: calc(100% * 8  / 12); }
.container12 .prefix9  { margin-left: calc(100% * 9  / 12); }
.container12 .prefix10 { margin-left: calc(100% * 10 / 12); }
.container12 .prefix11 { margin-left: calc(100% * 11 / 12); }

/* Prefix (push) — Container16 */
.container16 .prefix1  { margin-left: calc(100% * 1  / 16); }
.container16 .prefix2  { margin-left: calc(100% * 2  / 16); }
.container16 .prefix3  { margin-left: calc(100% * 3  / 16); }
.container16 .prefix4  { margin-left: calc(100% * 4  / 16); }
.container16 .prefix5  { margin-left: calc(100% * 5  / 16); }
.container16 .prefix6  { margin-left: calc(100% * 6  / 16); }
.container16 .prefix7  { margin-left: calc(100% * 7  / 16); }
.container16 .prefix8  { margin-left: calc(100% * 8  / 16); }
.container16 .prefix9  { margin-left: calc(100% * 9  / 16); }
.container16 .prefix10 { margin-left: calc(100% * 10 / 16); }
.container16 .prefix11 { margin-left: calc(100% * 11 / 16); }
.container16 .prefix12 { margin-left: calc(100% * 12 / 16); }
.container16 .prefix13 { margin-left: calc(100% * 13 / 16); }
.container16 .prefix14 { margin-left: calc(100% * 14 / 16); }
.container16 .prefix15 { margin-left: calc(100% * 15 / 16); }

/* Alpha / Omega */
.container12 .alpha,
.container16 .alpha { padding-left: 0; }
.container12 .omega,
.container16 .omega { padding-right: 0; }

/* --- Utility Columns --- */
.free    { width: 100%; }
.single  { width: 50%; margin: 0 auto; }
.half    { width: 50%; padding: 0 var(--gutter); }
.third   { width: 33.333%; padding: 0 var(--gutter); }
.quarter { width: 25%; padding: 0 var(--gutter); }
.fifth   { width: 20%; padding: 0 var(--gutter); }
.sixth   { width: 16.666%; padding: 0 var(--gutter); }
.eight   { width: 12.5%; padding: 0 var(--gutter); }
.ninth   { width: 11.111%; padding: 0 var(--gutter); }
.tenth   { width: 10%; padding: 0 var(--gutter); }

.centerhalf      { width: 50%; margin: 0 auto; }
.centertwothirds { width: 66.666%; margin: 0 auto; }

/* --- Flex Helpers --- */
.flex-center { align-items: center; }
.flex-top    { align-items: flex-start; }
.flex-bottom { align-items: flex-end; }
.reverse     { flex-direction: row-reverse; }

/* --- Gap Utilities --- */
.gap10 { gap: 10px; }
.gap15 { gap: 15px; }
.gap20 { gap: 20px; }
.gap30 { gap: 30px; }
.gap40 { gap: 40px; }
.gap60 { gap: 60px; }

/* --- Padding Utilities --- */
.pad10  { padding-top: 10px;  padding-bottom: 10px; }
.pad20  { padding-top: 20px;  padding-bottom: 20px; }
.pad30  { padding-top: 30px;  padding-bottom: 30px; }
.pad60  { padding-top: 60px;  padding-bottom: 60px; }
.pad100 { padding-top: 100px; padding-bottom: 100px; }

/* --- Text Alignment --- */
.center { text-align: center; }
.left   { text-align: left; }
.right  { text-align: right; }

/* --- Clear --- */
.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

.clearfix::after {
    content: '';
    display: table;
    clear: both;
}

/* --- Video Responsive --- */
.video {
    aspect-ratio: 16 / 9;
    width: 100%;
}
.video iframe,
.video video {
    width: 100%;
    height: 100%;
}

/* --- Back to Top --- */
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 20px;
    width: 44px;
    height: 44px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}
#back-to-top.visible {
    opacity: 1;
    visibility: visible;
}
#back-to-top svg {
    color: white;
    width: 24px;
    height: 24px;
}
#back-to-top:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-3px);
}

/* --- Responsive Helpers --- */
.hide-mobile  { display: block; }
.hide-desktop { display: none; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Large Desktop: 960px – 1160px */
@media only screen and (min-width: 960px) and (max-width: 1160px) {
    .container12,
    .container16,
    .full { max-width: 960px; }
}

/* Tablet: 768px – 959px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container12,
    .container16,
    .full { max-width: 768px; }

    .sixth { width: 33.333%; }
    .eight { width: 25%; }
    .tenth { width: 20%; }
}

/* Mobile: max 767px */
@media only screen and (max-width: 767px) {
    .container12,
    .container16,
    .full { max-width: 100%; padding: 0 15px; }

    .container12 .column1,  .container16 .column1,
    .container12 .column2,  .container16 .column2,
    .container12 .column3,  .container16 .column3,
    .container12 .column4,  .container16 .column4,
    .container12 .column5,  .container16 .column5,
    .container12 .column6,  .container16 .column6,
    .container12 .column7,  .container16 .column7,
    .container12 .column8,  .container16 .column8,
    .container12 .column9,  .container16 .column9,
    .container12 .column10, .container16 .column10,
    .container12 .column11, .container16 .column11,
    .container12 .column12, .container16 .column12,
    .container16 .column13, .container16 .column14,
    .container16 .column15, .container16 .column16 {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .container12 .prefix1,  .container12 .prefix2,
    .container12 .prefix3,  .container12 .prefix4,
    .container12 .prefix5,  .container12 .prefix6,
    .container12 .prefix7,  .container12 .prefix8,
    .container12 .prefix9,  .container12 .prefix10,
    .container12 .prefix11,
    .container16 .prefix1,  .container16 .prefix2,
    .container16 .prefix3,  .container16 .prefix4,
    .container16 .prefix5,  .container16 .prefix6,
    .container16 .prefix7,  .container16 .prefix8,
    .container16 .prefix9,  .container16 .prefix10,
    .container16 .prefix11, .container16 .prefix12,
    .container16 .prefix13, .container16 .prefix14,
    .container16 .prefix15 { margin-left: 0; }

    .row { margin: 0; flex-direction: column; }

    .half, .third, .centerhalf,
    .centertwothirds, .single { width: 100%; margin: 10px 0; padding: 0; }

    .quarter, .sixth { width: 50%; }
    .eight  { width: 50%; }
    .ninth  { width: 33.333%; }
    .tenth  { width: 50%; }
    .fifth  { width: 50%; }

    .reverse { flex-direction: column; }

    .hide-mobile  { display: none !important; }
    .hide-desktop { display: block !important; }

    #back-to-top { bottom: 20px; right: 10px; width: 38px; height: 38px; }
}

/* Mobile Medium: 480px – 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container12,
    .container16,
    .full { max-width: 480px; }
}