/* ==========================================================================
   Site customisations on top of the Photogam theme (assets/css/style.css).
   Collected from the former WordPress customizer, "Additional CSS" and
   Elementor widget settings, rewritten as template-level rules.
   ========================================================================== */

/* Site font for every language: Comfortaa (variable, weights 300–700, SIL OFL —
   self-hosted in assets/fonts/comfortaa/). Split per script like Google Fonts:
   the browser only downloads the Greek/extended files when a page uses them. */
@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/comfortaa/comfortaa-greek.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/comfortaa/comfortaa-latin-ext.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Comfortaa';
    src: url('../fonts/comfortaa/comfortaa-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
    --site-font: 'Comfortaa', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --main-font: var(--site-font);
    --secondary-font: var(--site-font);
}
button, input, select, textarea,
.main_carousel_counter, .serv-price span { font-family: var(--site-font); }

/* ---- Customizer: layout ------------------------------------------------ */
body { font-size: 12px; }
p { font-size: 1.2em; }

.column-wrapper { float: right; }
.column-image { left: 90px; border-radius: 30px; }
.column-title { text-align: left; }
.ci_dec { right: 50px; left: auto; }
.column-title h2, .column-title h1 { font-size: 4.2em; }
.column-title :is(h3,.column-title_sub) { font-size: 1em; }
section { border-radius: 30px; }

.logo-holder { float: left; }
.nav-holder { float: right; }
.header_social { position: absolute; right: 0; left: 0; top: 50%; transform: translateY(-50%); }
.main-footer .footer_contacts { float: left; }
.main-footer .policy-box { float: right; }

/* Sidebar */
.sb-overlay { background: rgba(0,0,0,0.4); }
.sidebar-wrap { border-radius: 30px; }
.close_sb { border-radius: 50%; }
.sb-widget-wrap :is(h2,h3) { font-size: 1.5em; }
.sidebar-social li a { border-radius: 50%; }
.sb-widget-wrap { border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 30px; }
.sb-support-link { color: #999; }
.sb-support-link:hover { color: #fff; }

/* ---- Former "Additional CSS" ------------------------------------------ */
@media (min-width: 1024px) {
    .page-about .section-title :is(h4,.section-title_sub) { max-width: 100%; }
    .serv-text { padding-top: 70px; }
}
.custom-wp-page hr { opacity: 0.3; }
.hwf-separator { display: none !important; }

.tpl-visuals .gallery-item img,
.tpl-category .gallery-item img {
    height: 300px;
    object-fit: cover;
    opacity: 0.6;
}
.gallery-items_single2 { border-bottom: none; }

.single_det_wrap { padding: 30px; }
.single_det_wrap p { padding: 0; }

.social-list i { font-size: 20px; }
.social-list a { outline: none; }
.social-list a:focus, .social-list a:active, .social-list a:focus-visible { outline: none; color: inherit; }
.social-list a:focus:not(:hover) i, .social-list a:active:not(:hover) i { color: inherit; }

.screen-reader-text { display: none; }

.column-title :is(h3,.column-title_sub) { max-width: 100%; font-size: 1.1em; font-weight: 600; }
.nav-holder nav li a { font-size: 1em; font-weight: 750; }
.section-title :is(h4,.section-title_sub) { margin-top: 10px; font-size: 1.2em; }
.section-title :is(h2,h3) { font-size: 2.2em; font-weight: 700; padding-bottom: 0; }
strong { font-weight: bold; }
.ml_images-wrap { display: none; }
.btn { color: #000 !important; }
/* the rule above also beat the theme's hover (black button, white text), leaving black on black */
.btn:hover, .btn:focus-visible { color: #fff !important; }

/* Testimonials: equal height slides */
.testimonilas-carousel .swiper-slide { height: auto !important; display: flex; flex-direction: column; }
.testimonilas-carousel .testi-item_wrap { display: flex; flex-direction: column; flex-grow: 1; height: 100%; }
.testimonilas-carousel .testi-item { display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }

/* ---- Former Elementor widget settings --------------------------------- */
/* Home slider */
.hfs_wrap { border-radius: 30px; }
.fslider-fw-item .overlay { opacity: .5; }
.slider-fw .thumb-info :is(h2,h3) { font-size: 34px; }
.home-widget .cirle-dec { display: block; width: 500px; height: 500px; margin: -250px 0 0 -250px; }
.fs-slider-item_btn { border-radius: 50px; overflow: hidden; }
.fs-slider_counter { border-radius: 40px; overflow: hidden; }
.ccsw { border-radius: 50%; overflow: hidden; }
/* Phones: the slide counter reads "01/04" on one line and sits on the same line as the
   arrow buttons (the theme stacked the numbers like a fraction, lower than the arrows). */
@media (max-width: 640px) {
    .fs-slider_counter {
        bottom: 40px; height: 46px; padding: 0 20px;
        display: flex; align-items: center; justify-content: center;
        line-height: 1; white-space: nowrap;
    }
    .fs-slider_counter:before { display: none; }
    .fs-slider_counter div { width: auto; }
    .fs-slider_counter .total:before { content: "/"; margin: 0 3px; color: rgba(255,255,255,.5); font-weight: 400; }
    .fs-slider_counter .total { color: rgba(255,255,255,.7); }
}

/* Section pages */
.tpl-sections .section-title { border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 40px; }
.inline-facts-holder { border-top: none; padding-top: 0; }
.column-wrapper_text .btn { border-radius: 50px; overflow: hidden; }
.serv-item .serv-media img { border-radius: 20px; overflow: hidden; }
.serv-price { border-radius: 10px; overflow: hidden; }
.testi-item_wrap { border-radius: 20px; overflow: hidden; }
.testi-item_wrap .overlay { opacity: .6; }
.order_btn { border-radius: 50px; overflow: hidden; }
.map-box { height: 400px; border-radius: 30px; overflow: hidden; }
.map-box .leaflet-map, .map-box .site-map { height: 100%; }
.site-map { background: #262626; }
.site-map.map-style-light { background: #e8e8e8; }
.site-map .leaflet-control-attribution { font-size: 10px; }
.leaflet-popup-content-wrapper { border-radius: 0; overflow: hidden; }
.leaflet-popup-tip { display: none; }
.leaflet-touch .leaflet-bar a { border-radius: 50%; overflow: hidden; }
.custom-form textarea, .custom-form input[type="text"], .custom-form input[type=email] { border-radius: 30px; overflow: hidden; }

/* Portfolio grids */
.inline-filters-wrap, .inline-folio-counter { border-radius: 30px; }
.vertical-portfolio_wrap .grid-item-holder { border-radius: 30px; }
.vertical-portfolio_wrap .grid-media-zoom { border-radius: 50%; overflow: hidden; }

/* Single project */
.tpl-portfolio .section-title { border-bottom: none; padding-bottom: 0; }
.gallery-items_single2 .grid-item-holder { border-radius: 30px; overflow: hidden; }
.gallery-items_single2 .grid-item-holder .box-media-zoom { border-radius: 50%; overflow: hidden; }
.single_det_wrap { border-radius: 20px; overflow: hidden; }
.single_det_wrap .btn { border-radius: 30px; overflow: hidden; }
.content-nav-fixed { border-radius: 50px; overflow: hidden; }
.content-nav_mediatooltip { border-radius: 50%; overflow: hidden; }
.content-nav-fixed .cn-dash { font-style: normal; }
/* Only one link (oldest / latest project): keep it on its own side and drop the divider */
.content-nav-fixed li.cn-prev { float: left; }
.content-nav-fixed li.cn-next { float: right; }
.content-nav-fixed.is-single:after { display: none; }
/* Prev / next on tablets & phones: the theme kept the one-line desktop layout (90px line height,
   120px gap for the photo), so longer titles wrapped over the other row. Two lines instead:
   photo, small "Previous ←" label, and the project name cut with "…" when it is too long. */
@media (max-width: 1068px) {
    .content-nav-fixed { border-radius: 30px; padding: 0 8px; }
    .content-nav-fixed li a.ln, .content-nav-fixed li a.rn {
        display: flex; align-items: center; gap: 12px;
        height: auto; min-height: 88px; line-height: 1.35;
        padding: 14px 22px 14px 92px;
    }
    .content-nav-fixed li a.rn { justify-content: flex-end; padding: 14px 92px 14px 22px; }
    .content-nav-fixed li a.ln span, .content-nav-fixed li a.rn span {
        display: flex; flex-direction: column; min-width: 0; padding: 0;
        font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,.55);
    }
    .content-nav-fixed li a.rn span { align-items: flex-end; text-align: right; }
    .content-nav-fixed li a strong {
        max-width: 100%; margin-top: 4px;
        font-size: 14px; letter-spacing: .5px; color: #fff;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .content-nav-fixed .cn-dash { display: none; }
    .content-nav-fixed li a.ln i, .content-nav-fixed li a.rn i { flex: none; transform: none !important; } /* no hover slide on touch */
    .content-nav_mediatooltip { width: 56px; height: 56px; margin-bottom: -28px; }
    .content-nav_mediatooltip.cnmd_leftside { left: 20px; }
    .content-nav_mediatooltip.cnmd_rightside { right: 20px; }
    .content-nav-fixed li .overlay { opacity: 0 !important; }
}
.single-video_wrap { border-radius: 30px; }
.promo-video-btn { border-radius: 50%; overflow: hidden; }
.single_det_wrap.sdwt p { text-align: center; }

/* Lightbox (project photos & video): blurred page behind instead of flat black */
.lg-backdrop {
    background-color: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .lg-backdrop { background-color: rgba(0, 0, 0, .85); }
}
/* Zoom icon (templates/partials/icon-zoom.php) in the hover buttons of photos */
.box-media-zoom .icon-zoom,
.grid-media-zoom .icon-zoom { width: 22px; height: 22px; vertical-align: middle; position: relative; top: -1px; }

/* Project gallery photos open the viewer when clicked anywhere (assets/js/site.js).
   Over them the cursor is the same zoom icon (white, with a dark outline so it shows on
   light and dark photos) and the theme's cursor ring steps aside. */
.lightgallery_wp .grid-item-holder,
.lightgallery_wp .grid-item-holder .box-media-zoom {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cg stroke='rgba(0,0,0,0.55)' stroke-width='4'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='rgba(0,0,0,0.25)'/%3E%3Cpath d='M17.6 17.6 24 24M12 8.8v6.4M8.8 12h6.4'/%3E%3C/g%3E%3Cg stroke='white' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3Cpath d='M17.6 17.6 24 24M12 8.8v6.4M8.8 12h6.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") 12 12, zoom-in;
}
.element-item { transition: opacity .3s ease; }
.element-item.zoom_hover { opacity: 0; }

/* ---- Additions for the PHP version ------------------------------------ */
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.logo-text { color: #fff; font-weight: 700; font-size: 1.4em; line-height: 35px; }

/* The theme styles .column-title h2; we use h1 for SEO. */
.column-title h1 {
    font-weight: 700; color: #fff; position: relative; float: left; width: 100%;
    margin: 0; line-height: 1.2;
}
.column-title h1:before {
    content: ''; position: absolute; left: 0; top: -20px; height: 2px; background: #fff; width: 40px;
}
@media only screen and (max-width: 640px) {
    .column-title h1 { font-size: 2.4em !important; }
}

/* Whole category card clickable on the Visuals page.
   The theme puts a hover overlay (.grid-item-holder:before) at z-index 9 and
   the info box at 10, so the card link must sit above 9 and the info above it. */
.tpl-visuals .grid-item-holder { position: relative; }
.grid-item-cover-link { position: absolute; inset: 0; z-index: 10; }
.tpl-visuals .grid-item-info { z-index: 11; pointer-events: none; }
.tpl-visuals .grid-item-info a { pointer-events: auto; }

/* Empty portfolio category: one card filling the page frame (like the 404 page) */
.empty-category { display: flex; min-height: 100%; }
.empty-category_box {
    width: 100%; padding: 60px 40px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #151515; border-radius: 30px; text-align: center;
}
.empty-category_box p { max-width: 460px; }
.empty-category_icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 70px; height: 70px; margin-bottom: 24px;
    border-radius: 50%; border: 1px solid rgba(255,255,255,.15);
    color: #fff; font-size: 24px;
}
.empty-category_title { color: #fff; font-size: 2.2em; font-weight: 700; margin-bottom: 12px; }
.empty-category .empty-category_box p { color: rgba(255,255,255,.65); font-size: 1.3em; margin-bottom: 30px; padding: 0; text-align: center; }
.empty-category .btn { float: none; display: inline-block; border-radius: 50px; }

/* Contact form */
.custom-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.custom-form .form-control-wrap { display: block; }
.custom-form .cf-turnstile { margin: 0 0 20px; float: left; width: 100%; text-align: left; }
.custom-form button.btn { border: none; cursor: pointer; }
.custom-form button.btn[disabled] { opacity: .6; cursor: wait; }
.custom-form .form-response { float: left; width: 100%; margin-top: 20px; text-align: left; font-size: 1.1em; display: none; padding: 14px 20px; border-radius: 20px; }
.custom-form .form-response.is-ok { display: block; color: #9be29b; border: 1px solid rgba(155,226,155,.4); }
.custom-form .form-response.is-error { display: block; color: #ff9b9b; border: 1px solid rgba(255,155,155,.4); }
.custom-form .field-error { border-color: #ff7b7b !important; }

/* 404: one card filling the page frame, content centred */
.error-page-section {
    display: flex; align-items: center; justify-content: center;
    min-height: 100%; margin: 0; padding: 60px 20px; border: none;
}
.error-page-section .container { float: none; width: 100%; max-width: 620px; margin: 0 auto; }
.error-404 { padding: 0; text-align: center; }
.error-404_num {
    font-size: 9em; font-weight: 700; line-height: 1; letter-spacing: -2px;
    color: rgba(255,255,255,.12); margin-bottom: 10px;
}
.custom-wp-page.error-404 h1 { color: #fff; text-align: center; font-size: 2.4em; margin: 0 0 16px; }
.custom-wp-page.error-404 p { color: rgba(255,255,255,.65); font-size: 1.3em; line-height: 1.6; text-align: center; margin: 0 auto 34px; padding: 0; max-width: 460px; }
.error-404 .btn { float: none; display: inline-block; border-radius: 50px; margin: 0; }
@media (max-width: 1068px) {
    .error-page-section, .empty-category { min-height: calc(100vh - 160px); }
}
@media (max-width: 768px) {
    .error-404_num { font-size: 6.5em; }
    .custom-wp-page.error-404 h1 { font-size: 1.9em; }
    .custom-wp-page.error-404 p { font-size: 1.15em; }
}

/* ---- Entrance animations (single project media) ------------------------
   Elements carry data-anim="<effect>" (chosen per project in the dashboard).
   html.anim-ready is set in <head>; assets/js/site.js adds .is-in on scroll. */
.anim-ready [data-anim] {
    transition:
        opacity 1s cubic-bezier(.2, .65, .2, 1),
        transform 1.25s cubic-bezier(.2, .65, .2, 1),
        filter 1.1s ease,
        clip-path 1.35s cubic-bezier(.77, 0, .18, 1);
    transition-delay: var(--anim-delay, 0ms);
}
.anim-ready [data-anim]:not(.is-in) { opacity: 0; }
.anim-ready [data-anim="fade-up"]:not(.is-in)     { transform: translate3d(0, 70px, 0); }
.anim-ready [data-anim="zoom-in"]:not(.is-in)     { transform: scale(.82); }
.anim-ready [data-anim="zoom-out"]:not(.is-in)    { transform: scale(1.12); }
.anim-ready [data-anim="slide-left"]:not(.is-in)  { transform: translate3d(-110px, 0, 0); }
.anim-ready [data-anim="slide-right"]:not(.is-in) { transform: translate3d(110px, 0, 0); }
.anim-ready [data-anim="blur-in"]:not(.is-in)     { filter: blur(26px); transform: scale(1.06); }
.anim-ready [data-anim="flip-up"]:not(.is-in)     { transform: perspective(1400px) rotateX(32deg) translate3d(0, 80px, 0); transform-origin: 50% 100%; }
/* Reveals: the card is uncovered like a curtain while the photo settles from a zoom
   (the photo reuses the theme's own 2s image transition). */
.anim-ready [data-anim^="reveal"]                 { clip-path: inset(0 0 0 0 round 30px); }
.anim-ready [data-anim="reveal-up"]:not(.is-in)   { opacity: 1; clip-path: inset(100% 0 0 0 round 30px); }
.anim-ready [data-anim="reveal-left"]:not(.is-in) { opacity: 1; clip-path: inset(0 100% 0 0 round 30px); }
.anim-ready [data-anim^="reveal"]:not(.is-in) img { transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
    .anim-ready [data-anim] { transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ---- Side panel (⋮ button) ---------------------------------------------
   No close (×) button: the panel closes with the ⋮ button, a tap outside it,
   or Escape (site.js). The space reserved for the button is removed. */
.close_sb { display: none !important; }
/* The theme masks the top/bottom 50px of the panel with solid bars, so keep the padding larger */
.sidebar-wrap-container { padding-top: 70px; padding-bottom: 70px; overflow-x: hidden; }
/* The social icons' hover tooltips belong to the left icon bar; in the panel they are never
   shown but sat outside it on the right and made the panel scroll sideways. */
.sidebar-social .header-social_tooltip { display: none; }

/* ---- Mobile menu (≤ 1068px): same card as the side panel ----------------
   Note: the theme's JS gives .main-header a transform, so a "fixed" menu inside
   it is positioned relative to the header: its height is set from the viewport. */
@media only screen and (max-width: 1068px) {
    .sb-overlay { bottom: 0; }

    .main-menu {
        position: fixed;
        top: 90px;
        right: 30px;
        left: auto;
        bottom: auto;
        width: 450px;
        height: calc(100vh - 180px);
        height: calc(100dvh - 180px);
        padding: 54px 30px 40px; /* first link lines up with the side panel's first heading */
        background: #151515;
        border: 0;
        border-radius: 30px;
        box-shadow: 0 10px 34px 0 rgba(0, 0, 0, .5);
        overflow-y: auto;
        z-index: 50;
        transform: translateX(30px);
        transition: opacity .3s ease-in-out, visibility .3s ease-in-out, transform .3s ease-in-out;
    }
    .main-menu.vismobmenu { right: 30px; transform: none; }

    /* The theme's sliding-menu plugin writes fixed pixel sizes inline */
    .main-menu .menusb,
    .main-menu .menusb .sliding-menu-wrapper,
    .main-menu .menusb ul { width: 100% !important; height: auto !important; overflow: visible; }

    /* Links look like the side panel headings, separated like its sections */
    .menusb li {
        padding: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }
    .menusb a {
        padding: 16px 0;
        font-size: 18px;
        line-height: 24px;
        font-weight: 700;
        color: #fff;
        text-align: left;
        transition: color .2s ease;
    }
    .menusb a:hover,
    .menusb li.current-menu-item > a { color: #999; }

    /* Language switch: a round button like the social icons */
    .menusb li.lang-switch { border-bottom: 0; margin-top: 30px; }
    .menusb li.lang-switch a {
        float: left;
        width: 46px;
        height: 46px;
        padding: 0;
        border-radius: 50%;
        background: #000;
        font-size: 13px;
        line-height: 46px;
        text-align: center;
        letter-spacing: 1px;
    }
    .menusb li.lang-switch a:hover { color: #fff; background: #222; }
}

/* Phones: both cards with equal side margins (the theme's full-width side panel
   was pushed 30px past the right edge of the screen). */
@media only screen and (max-width: 768px) {
    .sidebar-wrap,
    .main-menu,
    .main-menu.vismobmenu {
        left: 20px;
        right: 20px;
        width: auto;
        margin-right: 0;
        border-radius: 30px;
    }
    .sidebar-wrap { transform: translateX(30px); transition: all .3s ease-in-out; }
    .sidebar-wrap.vis-sb { transform: none; }
    .sidebar-wrap-container { padding: 70px 30px; }
    .main-menu { padding: 54px 30px 40px; }
}

/* Text pages: content headings are renumbered for a clean outline (seo_heading_outline());
   "is-hN" keeps the size they were written with. */
.custom-wp-page .is-h2 { font-size: 2.2em; font-weight: 600; }
.custom-wp-page .is-h3 { font-size: 1.8em; font-weight: 600; }
.custom-wp-page .is-h4 { font-size: 1.4em; font-weight: 500; }
.custom-wp-page .is-h5 { font-size: 1.2em; font-weight: 500; }
.custom-wp-page .is-h6 { font-size: 1em; font-weight: 400; }

/* ---- Page frame: every page has the same content width ------------------------
   Side margins follow the theme's left bar: 90px on wide screens, 70px up to 1500px,
   and 15px on tablets and phones (content used to touch the screen edges there).
   Pages that built their right margin in other ways now use the same value. */
:root { --frame: 90px; }
@media (max-width: 1500px) {
    :root { --frame: 70px; }
}
@media (min-width: 1069px) {
    .tpl-text #wrapper, .tpl-404 #wrapper { right: var(--frame); }
    .vertical-portfolio_wrap.no-pad-verport { padding-right: var(--frame); } /* Visuals grid */
    .tpl-category .empty-category { margin-right: var(--frame); }
}
@media (max-width: 1068px) {
    :root { --frame: 15px; }
    #wrapper { left: var(--frame); right: var(--frame); }
}
/* Grids: the cards' own 10px spacing sits outside the frame, so their edges line up with other pages */
.vertical-portfolio_wrap .gallery-items { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px; }
/* Text pages: room for the fixed footer below the card, so its rounded bottom corners show */
.tpl-text .fullscreen::after { content: ""; display: block; height: var(--frame); }

/* ---- Tables in page text (content_tables() in app/helpers.php) ------------------
   Never wider than the card: a table that does not fit scrolls sideways inside it.
   On phones each row becomes a small card, every value under its column heading. */
.table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.table-wrap table { margin-bottom: 0; }
.custom-wp-page table td, .custom-wp-page table th { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 640px) {
    .custom-wp-page table.has-labels, .custom-wp-page table.has-labels tbody,
    .custom-wp-page table.has-labels tr, .custom-wp-page table.has-labels td { display: block; width: 100%; }
    .custom-wp-page table.has-labels thead { display: none; }
    .custom-wp-page table.has-labels tr { padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.3); }
    .custom-wp-page table.has-labels tbody tr:last-child { border-bottom: none; }
    .custom-wp-page table.has-labels td { border: none; padding: 5px 18px; line-height: 1.5; border-radius: 0 !important; }
    .custom-wp-page table.has-labels td:first-child { color: #fff; font-weight: 600; }
    .custom-wp-page table.has-labels td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: 2px;
        font-size: .8em; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.5);
    }
}