/* =========================================================================
   TOTEM - The Budapest Guide
   Layout calibrated to .task/page-1.png — 1080 x 1920 portrait stage.
   Measurements (scaled from 1190x1684 source):
     CONTENT bottom diagonal: left y=1183, right y=854
     FOOTER  top    diagonal: left y=1455, right y=1643
   ========================================================================= */

:root {
    --totem-w: 1080px;
    --totem-h: 1720px;
    --totem-max-w: 1200px;
    --totem-max-h: 1980px;

    /* CONTENT block: rectangular bounding box from 0 to deepest (left) edge.
       Diagonal cuts the top-right corner up to y=854. */
    --content-h: 1187px;
    --content-cut-right: 71.3%;       /* 846 / 1187 */

    /* FOOTER block measured from .task/page-mintak/page-1-minta.png:
       left y=1564, right y=1661 in the 1080x1920 stage. */
    --footer-top: 1564px;
    --footer-h: 356px;
    --footer-cut-right: 27.2%;        /* (1661-1564) / 356 */

    /* IMAGE band starts where the content's right edge ends (y=854). */
    --image-top: 846px;

    /* Colour palette — sampled from the sample image. */
    --c-paper: #ffffff;
    --c-ink: #000000;            /* dominant text colour in the sample */
    --c-ink-soft: #4a4a4a;
    --c-rule: #000000;
    --c-footer: #1a1c22;
    --c-footer-ink: #ffffff;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    color: var(--c-ink);
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.totem-body {
    background: #000;
}

/* ---------- Stage (1080 x 1920 virtual canvas) ---------- */
#content.totem-content {
    position: absolute;
    /*top: 0;*/
    /*left: 50%;*/
    min-width: var(--totem-w);
    max-width: var(--totem-max-w);
    width: 100%;
    min-height: var(--totem-h);
    max-height: var(--totem-max-h);
    height: 100%;
    background: #000;
    overflow: hidden;
    transform-origin: top center;
    /* totem.js applies translate(-50%) scale(...) at runtime */
}

.totem-slideshow,
.totem-slideshow .swiper-wrapper,
.totem-slide {
    width: 100%;
    height: 100%;
}

.totem-slide {
    position: relative;
    overflow: hidden;
    background: #000;
}

/* ---------- Section base ---------- */
.totem-section {
    position: absolute;
    left: 0;
    width: 100%;
}

/* =========================================================
   1) CONTENT  (top white block, diagonal bottom)
   ========================================================= */
.totem-section--content {
    top: 0;
    height: var(--content-h);
    background-color: var(--c-paper);
    background-image: url('/resources/images/section-bg-white.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 110% auto;
    z-index: 30;

    /* Cut top-right portion: bottom edge slopes from (0,100%) up to (100%,72.2%).
       Polygon order: top-left, top-right cut start, then diagonal bottom edge. */
    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% var(--content-cut-right),
        0 100%
    );
            clip-path: polygon(
        0 0,
        100% 0,
        100% var(--content-cut-right),
        0 100%
    );
}

.totem-section--content-overflow {
    height: var(--totem-h);
    overflow: visible;
    background-color: transparent;
    background-image: none;
    -webkit-clip-path: none;
            clip-path: none;
}

.totem-section--content-overflow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--content-h);
    background-color: var(--c-paper);
    background-image: url('/resources/images/section-bg-white.svg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 110% auto;
    z-index: 0;
    -webkit-clip-path: polygon(
        0 0,
        100% 0,
        100% var(--content-cut-right),
        0 100%
    );
            clip-path: polygon(
        0 0,
        100% 0,
        100% var(--content-cut-right),
        0 100%
    );
}

.totem-section__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 116px 138px 220px 138px; /* extra bottom padding to clear the diagonal */
    display: flex;
    flex-direction: column;
}

.totem-section--content-overflow .totem-section__inner {
    z-index: 1;
    height: auto;
    min-height: var(--content-h);
    padding-bottom: 40px;
}

/* ---------- Masthead: Dinner & Cruise / with / Live Folklore... ---------- */
.totem-masthead {
    text-align: center;
    margin: 0 0 12px;
    color: var(--c-ink);
}

.totem-masthead__title {
    display: block;
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 96px;
    font-weight: 600;
    line-height: 0.88;
    margin: 0;
    color: var(--c-ink);
    letter-spacing: 0;
}

.totem-masthead__with {
    display: block;
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    margin: -6px 0 4px;
    color: var(--c-ink);
}

.totem-masthead__subtitle {
    display: block;
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 45px;
    font-weight: 600;
    line-height: 1;
    margin: 0;
    color: var(--c-ink);
}

/* ---------- Menu: two columns from data/content-1.php ---------- */
.totem-menu {
    width: 100%;
}

.totem-menu__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 46px;
    width: 100%;
}

.totem-menu__column {
    min-width: 0;
}

.totem-menu__heading {
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    margin: 0 0 17px;
    color: var(--c-ink);
    letter-spacing: 0;
}

.totem-menu__group {
    margin: 0 0 19px;
}

.totem-menu__title {
    display: block;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 8px;
    color: var(--c-ink);
    letter-spacing: 0;
}

.totem-menu__items {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--c-ink);
}

.totem-menu__item {
    display: block;
    margin: 0;
    padding: 0;
}

/* ---------- Brochure pages: Drink & Cruise / Sightseeing Cruise ---------- */
.totem-brochure__masthead {
    text-align: center;
    color: var(--c-ink);
    margin: 0 0 28px;
}

.totem-brochure__title {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 91px;
    font-weight: 600;
    line-height: 0.92;
    margin: 0;
    color: var(--c-ink);
}

.totem-brochure__subtitle {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 35px;
    font-weight: 600;
    line-height: 1.05;
    margin: 4px 0 0;
    color: var(--c-ink);
}

.totem-brochure__heading {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 51px;
    font-weight: 600;
    line-height: 1.05;
    margin: 3px 0 0;
    color: var(--c-ink);
}

.totem-brochure {
    display: grid;
    grid-template-columns: 1.12fr 0.88fr;
    column-gap: 54px;
    width: 100%;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    color: var(--c-ink);
}

.totem-brochure__text {
    font-size: 25px;
    font-weight: 400;
    line-height: 1.19;
}

.totem-brochure__text p {
    margin: 0 0 39px;
}

.totem-brochure__side-title {
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 26px;
    color: var(--c-ink);
}

.totem-brochure__items {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-ink);
}

.totem-brochure__items li {
    position: relative;
    margin: 0 0 17px;
    padding: 0 0 0 22px;
}

.totem-brochure__items li::before {
    content: '';
    position: absolute;
    top: 11px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-ink);
}

.totem-card-callout {
    display: flex;
    flex-wrap: wrap;
    column-gap: 34px;
    row-gap: 10px;
    margin: 100px 0 0;
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: var(--c-ink);
}

.totem-card-callout span {
    display: block;
}

/* ---------- Timetable pages ---------- */
.totem-timetable__masthead {
    text-align: center;
    color: var(--c-ink);
    margin: 0 0 30px;
}

.totem-timetable__title {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 96px;
    font-weight: 600;
    line-height: 0.95;
    margin: 0;
    color: var(--c-ink);
}

.totem-timetable__subtitle {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.05;
    margin: 12px 0 0;
    color: var(--c-ink);
}

.totem-timetable__date {
    font-family: 'Josefin Sans', Arial, Helvetica, sans-serif;
    font-size: 39px;
    font-weight: 600;
    line-height: 1.05;
    margin: 30px 0 0;
    color: var(--c-ink);
}

.totem-timetable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    color: var(--c-ink);
}

.totem-timetable th,
.totem-timetable td {
    width: 23.5%;
    padding: 7px 11px;
    border: 0;
    vertical-align: top;
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.18;
}

.totem-timetable th:first-child,
.totem-timetable td:first-child {
    width: 29.5%;
    text-align: left;
}

.totem-timetable thead tr:first-child th {
    font-size: 24px;
    line-height: 1.08;
    padding-bottom: 14px;
}

.totem-timetable thead tr:nth-child(2) th {
    font-size: 24px;
    line-height: 1.05;
    padding-top: 10px;
    padding-bottom: 26px;
}

.totem-timetable__label {
    font-size: 22px !important;
    line-height: 1.1 !important;
}

.totem-timetable__time {
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

.totem-timetable tbody td {
    min-height: 62px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* =========================================================
   2) IMAGE  (full-width photo behind everything else)
   ========================================================= */
.totem-section--image {
    top: var(--image-top);
    /* Span from image-top all the way to the bottom of the stage so the
       footer's diagonal top edge always overlaps onto the image. */
    height: calc(var(--totem-h) - var(--image-top));
    z-index: 10;
}

.totem-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* =========================================================
   3) FOOTER (diagonal top edge, dark band, logo)
   ========================================================= */
.totem-section--footer {
    top: var(--footer-top);
    height: var(--footer-h);
    z-index: 20;
}

.totem-footer__bg {
    position: absolute;
    inset: 0;
    background: var(--c-footer);
    /* Diagonal top: starts flush at top-left, descends to --footer-cut-right at top-right. */
    -webkit-clip-path: polygon(
        0 0,
        100% var(--footer-cut-right),
        100% 100%,
        0 100%
    );
            clip-path: polygon(
        0 0,
        100% var(--footer-cut-right),
        100% 100%,
        0 100%
    );
}

.totem-footer__inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 60px 60px;
}

.totem-footer__logo {
    display: block;
    width: auto;
    max-width: 78%;
    max-height: 180px;
    height: auto;
    /* footer.png is dark on transparent — invert to white on dark band. */
    filter: brightness(0) invert(1);
}

/* =========================================================
   States
   ========================================================= */
#content.is-loading {
    background: #fff;
}

.error {
    color: #fff;
    background: var(--c-ink);
    padding: 30px;
    font-family: 'Oxygen', Arial, Helvetica, sans-serif;
    text-align: center;
}