:root {
    --tpk-green: #4d751e;
    --tpk-green-dark: #2a6814;
    --tpk-brown: #6e4230;
    --tpk-blue-soft: #a0ccdd;
    --tpk-paper: #eef5df;
    --tpk-white: #fff;
    --tpk-shadow: rgba(55, 74, 36, .18);
}

/*
 * TPKamien Joomla 6 template v1.3
 * Clean reimplementation based on the original Joomla 1.5 layout.
 * Qlassik font files are intentionally NOT bundled. If you are licensed to use
 * your original copies, place Qlassik_TB.ttf and QlassikBold_TB.ttf in:
 * templates/tpkamien/ttf/
 */
@font-face {
    font-family: 'Qlassik';
    src: url('../ttf/QlassikBold_TB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Qlassik2';
    src: url('../ttf/Qlassik_TB.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body.tpkamien {
    min-height: 100%;
    margin: 0;
    font: 12px/1.45 Arial, Helvetica, sans-serif;
    color: var(--tpk-brown);
    background: var(--tpk-green-dark) url('../images/bg_tpkamien.jpg') no-repeat top center;
}
a { color: var(--tpk-brown); text-decoration: none; }
a:hover, a:focus { color: var(--tpk-green); text-decoration: underline; }
img { max-width: 100%; height: auto; border: 0; }

.site-wrapper {
    width: 1047px;
    max-width: none;
    margin: 0 auto;
}

/* Header reproduces the original 200 / 607 / 240 column geometry. */
.site-header {
    position: relative;
    height: 232px;
}
.header-search {
    position: absolute;
    right: 0;
    top: 0;
    width: 239px;
    height: 47px;
    padding: 12px 15px 0 10px;
    background: url('../images/szukaj.gif') no-repeat 0 0;
    z-index: 6;
}
.header-search h3,
.header-search label,
.header-search .form-label,
.header-search .input-group-text,
.header-search .card-header { display: none !important; }
.header-search form,
.header-search .search,
.header-search .finder,
.header-search .mod-finder,
.header-search .mod-search,
.header-search .input-group { margin: 0; padding: 0; display: block; }
.header-search input[type='search'],
.header-search input[type='text'] {
    width: 173px;
    height: 24px;
    margin: 0;
    padding: 3px 7px;
    border: 1px solid #d3d3d3;
    border-radius: 0;
    background: rgba(255,255,255,.9);
    color: #454545;
    text-align: center;
    font-size: 11px;
    box-shadow: none;
}
.header-search button,
.header-search .btn,
.header-search input[type='submit'] {
    position: absolute;
    top: 0;
    right: 0;
    width: 47px;
    height: 47px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    box-shadow: none;
}

/* Joomla 6 login module fitted to the original 239 x 181 cloud. */
.header-login {
    position: absolute;
    right: 0;
    top: 47px;
    width: 239px;
    height: 181px;
    z-index: 5;
    overflow: hidden;
    background: url('../images/login_form.png') no-repeat 0 0;
}
.header-login h3,
.header-login .card-header,
.header-login legend,
.header-login .form-label,
.header-login .input-group-text,
.header-login .input-password-toggle,
.header-login .visually-hidden,
.header-login .icon-user,
.header-login .icon-eye,
.header-login .icon-lock,
.header-login .icon-key,
.header-login .plg_system_webauthn_login_button { display: none !important; }
.header-login .moduletable,
.header-login .module,
.header-login .card,
.header-login .card-body,
.header-login form,
.header-login fieldset,
.header-login .mod-login,
.header-login .mod-login__userdata,
.header-login .userdata {
    position: relative;
    width: 239px;
    height: 181px;
    min-height: 181px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none;
}
.header-login .mod-login__username,
.header-login .mod-login__password,
.header-login .control-group,
.header-login .form-group,
.header-login .mb-3 { margin: 0 !important; padding: 0 !important; }
.header-login .input-group { display: block !important; width: 100%; }
.header-login input[type='text'],
.header-login input[type='password'],
.header-login input[type='email'] {
    display: block;
    width: 219px !important;
    max-width: 219px;
    height: 25px;
    min-height: 25px;
    margin: 7px auto 0;
    padding: 2px 6px;
    border: 1px solid #d3d3d3;
    border-radius: 0 !important;
    background: #fff;
    color: #454545;
    text-align: center;
    font-size: 14px;
    line-height: 19px;
    box-shadow: none;
}
.header-login .mod-login__password input { margin-top: 7px; }
.header-login .mod-login__remember,
.header-login .control-group.mod-login__remember {
    position: absolute !important;
    left: 28px;
    top: 79px;
    width: 115px;
    height: 20px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}
.header-login .mod-login__remember label { display: inline !important; margin: 0 !important; font-size: 11px; }
.header-login input[type='checkbox'] { width: 14px; height: 14px; margin: 0; }
.header-login .mod-login__submit {
    position: absolute !important;
    left: 8px;
    top: 106px;
    margin: 0 !important;
    padding: 0 !important;
}
.header-login .mod-login__submit .btn,
.header-login button[type='submit'],
.header-login input[type='submit'] {
    display: block;
    width: 67px;
    min-width: 67px;
    height: 27px;
    min-height: 27px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: url('../images/button.gif') no-repeat center !important;
    color: transparent !important;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
    box-shadow: none;
}
.header-login .mod-login__options,
.header-login ul,
.header-login .list-group {
    position: absolute !important;
    left: 81px;
    top: 116px;
    width: 151px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    background: transparent;
    font-size: 11px;
    line-height: 1.25;
}
.header-login li,
.header-login .list-group-item { margin: 0 0 2px; padding: 0; border: 0; background: transparent; }
.header-login a { color: var(--tpk-brown); }

.site-logo {
    position: absolute;
    left: 322px;
    top: 139px;
    display: inline-block;
    min-height: 42px;
    padding-left: 36px;
    font-family: 'Qlassik', Georgia, 'Times New Roman', serif;
    font-size: 32px;
    font-weight: normal;
    line-height: 1.1;
    color: var(--tpk-green);
    white-space: nowrap;
    text-shadow: 0 1px rgba(255,255,255,.8);
}
.site-logo::before {
    content: '';
    position: absolute;
    left: -25px;
    top: -25px;
    width: 63px;
    height: 60px;
    background: url('../images/logo.gif') no-repeat center;
    pointer-events: none;
}
.site-logo:hover, .site-logo:focus { color: var(--tpk-green); text-decoration: none; }

/* Exactly aligned with the central 607px column (starts at x=200). */
.top-menu {
    position: absolute;
    left: 200px;
    bottom: 0;
    width: 607px;
    height: 47px;
    overflow: hidden;
    background: #fff url('../images/top_menu.gif') no-repeat 0 0;
}
.top-menu ul,
.bottom-menu ul { display: flex; align-items: stretch; justify-content: center; margin: 0; padding: 0; list-style: none; }
.top-menu li,
.bottom-menu li { margin: 0; padding: 0; }
.top-menu li > a,
.bottom-menu li > a {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 109px;
    height: 47px;
    padding: 0 5px 9px;
    color: var(--tpk-green);
    line-height: 1.05;
    text-align: center;
    background: url('../images/top_zakladka.gif') no-repeat bottom center;
}
.top-menu li > a:hover,
.top-menu li.active > a,
.top-menu li.current > a { color: var(--tpk-brown); text-decoration: none; background-image: url('../images/top_active.gif'); background-position: top center; }
.top-menu ul ul { display: none; }

.layout-grid {
    display: grid;
    grid-template-columns: 200px 607px 240px;
    align-items: start;
}
/* Keep the original three-column geometry even when one side has no modules.
   This prevents the content column from sliding sideways and keeps user3
   exactly aligned with the 607px centre column. */
.sidebar.is-empty { min-height: 1px; }

.sidebar-left { width: 200px; }
.date-box {
    width: 193px;
    height: 39px;
    margin-left: auto;
    padding: 10px 8px 0;
    text-align: center;
    background: url('../images/data.png') no-repeat right top;
}
.sidebar-left .moduletable,
.sidebar-left .moduletable_menu,
.sidebar-left .card,
.sidebar-left .module {
    width: 193px;
    margin: 10px 0 0 auto;
    padding: 0 0 10px;
    overflow: hidden;
    border: 0;
    border-radius: 10px 10px 0 10px;
    background: url('../images/menu_left_bg.png') repeat-y bottom center;
    box-shadow: none;
}
.sidebar-left h3,
.sidebar-left .card-header {
    width: 193px;
    min-height: 30px;
    margin: 0;
    padding: 6px 8px;
    border: 0;
    background: url('../images/menu_left_name.png') no-repeat top center;
    color: var(--tpk-green);
    text-align: center;
    font: 14px/18px Tahoma, Arial, sans-serif;
}
.sidebar-left .card-body,
.sidebar-left .module-body { padding: 0; }
.sidebar-left ul { margin: 0; padding: 0; list-style: none; }
.sidebar-left li { margin: 0; padding: 0; }
.sidebar-left li > a {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 7px 4px 5px;
    text-align: center;
    line-height: 18px;
}
.sidebar-left li > a:hover,
.sidebar-left li.active > a,
.sidebar-left li.current > a { text-decoration: none; background: url('../images/right_link.png') no-repeat center; }
.sidebar-left ul ul a { padding-left: 12px; font-size: 11px; }

.main-column {
    width: 607px;
    max-width: 100%;
    min-height: 811px;
    overflow: hidden;
    background: var(--tpk-paper) url('../images/pole_tekstu.gif') repeat-y top left;
    box-shadow: 0 8px 20px var(--tpk-shadow);
}
.hero {
    width: 607px;
    max-width: 100%;
    min-height: 103px;
    background: url('../images/baner.jpg') no-repeat top left;
}
.hero:empty { display: block; }
.breadcrumbs {
    min-height: 48px;
    padding: 14px 20px 5px 50px;
    background: url('../images/okruszki-19.jpg') no-repeat 0 0;
    font-size: 11px;
}
.breadcrumbs ol,
.breadcrumbs ul { margin: 0; padding: 0; }
.content-area {
    min-height: 650px;
    padding: 18px 30px 32px;
    overflow-wrap: anywhere;
}
.content-area h1,
.content-area h2,
.content-area h3,
.page-header h1,
.page-header h2,
.item-title { color: var(--tpk-green); line-height: 1.2; }
.content-area h1,
.page-header h1,
.page-header h2 { margin-top: 0; text-align: center; font-size: 25px; }
.article-info, .text-muted, .small { color: var(--tpk-green); font-size: 11px; }
.content-area table { max-width: 100%; }
.content-area iframe { max-width: 100%; }

.readmore .btn,
.content-area .btn-primary,
.content-area button,
.content-area input[type='submit'] {
    padding: 6px 12px;
    border: 0;
    border-radius: 2px;
    background: var(--tpk-green);
    color: #fff;
    cursor: pointer;
}

.sidebar-right { width: 240px; position: relative; z-index: 2; }
.sidebar-right .moduletable,
.sidebar-right .moduletable_menu,
.sidebar-right .card,
.sidebar-right .module {
    width: 240px;
    margin: 0 0 10px;
    padding: 0 0 20px;
    overflow: hidden;
    border: 1px solid var(--tpk-blue-soft);
    border-top: 0;
    border-radius: 10px;
    background: #fff url('../images/menu_right_bot.gif') no-repeat bottom center;
    box-shadow: none;
}
.sidebar-right h3,
.sidebar-right .card-header {
    min-height: 37px;
    margin: 0 0 8px;
    padding: 10px 10px 8px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background: url('../images/menu_right.gif') no-repeat top center;
    color: var(--tpk-brown);
    text-align: center;
    font-size: 14px;
    font-weight: 400;
}
.sidebar-right .card-body,
.sidebar-right .module-body,
.sidebar-right .moduletable > :not(h3) { padding-left: 12px; padding-right: 12px; }
.sidebar-right ul { margin: 0; padding-left: 18px; }
.sidebar-right li > a { display: block; padding: 5px 2px; }

/* Custom module "Wsparcie działalności" can simply be assigned to position right. */
.sidebar-right .support-module strong,
.sidebar-right .support-module b { color: var(--tpk-green); }

.bottom-menu {
    width: 607px;
    min-height: 47px;
    margin: 0;
    overflow: hidden;
    background: url('../images/bottom_menu.gif') no-repeat top center;
}
.bottom-menu li > a { color: var(--tpk-brown); background-image: url('../images/bot_zakladka.gif'); }
.bottom-menu li > a:hover,
.bottom-menu li.active > a,
.bottom-menu li.current > a { color: #fff; text-decoration: none; background-image: url('../images/bot_active.gif'); background-position: top center; }

.site-footer {
    width: 607px;
    min-height: 169px;
    margin: 0 auto;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
    clear: both;
    background: url('../images/footer.gif') no-repeat top center;
}
.footer-box { min-height: 115px; }
.footer-box h3 { margin: 0 0 8px; color: var(--tpk-green); font-size: 14px; }
.footer-bottom { grid-column: 1 / -1; text-align: center; font-size: 11px; color: #777; }

.alert { margin: 15px 30px 0; padding: 10px 12px; border: 1px solid #e5d38a; background: #fff8dd; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 20px 0 0; padding: 0; list-style: none; }
.pagination a, .pagination span { display: inline-block; padding: 4px 7px; background: rgba(255,255,255,.65); }

/* Phoca Gallery: keep imported thumbnails inside the content column. */
.pg-categories-view,
.pg-category-view,
.pg-detail-view,
.phocagallery { max-width: 100%; }
.pg-categories-view img,
.pg-category-view img,
.phocagallery img { max-width: 100%; height: auto; }

.component-view,
.offline-view,
.error-view { background: var(--tpk-green-dark) url('../images/bg_tpkamien.jpg') no-repeat top center; }
.component-content,
.offline-box,
.error-box { width: min(800px,calc(100% - 24px)); margin: 40px auto; padding: 30px; background: var(--tpk-paper); }

/* Medium screens: keep the original desktop geometry. A slightly narrow
   browser may scroll horizontally rather than distorting the 200/607/240 layout. */
@media (min-width: 821px) and (max-width: 1066px) {
    body.tpkamien { min-width: 1047px; }
    .site-wrapper { width: 1047px; max-width: none; padding: 0; }
}

/* Mobile: stack modules; retain image motifs without fixed-width overflow. */
@media (max-width: 820px) {
    body.tpkamien { background-size: auto 260px; }
    body.tpkamien { min-width: 0; }
    .site-wrapper { width: 100%; max-width: 100%; padding: 0 8px; }
    .site-header { height: auto; min-height: 300px; padding-top: 8px; }
    .header-search { right: 0; top: 8px; }
    .header-login { right: 0; top: 55px; }
    .site-logo {
        left: 12px;
        top: 154px;
        max-width: calc(100% - 260px);
        padding-left: 34px;
        white-space: normal;
        font-size: 26px;
    }
    .top-menu {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        min-height: 47px;
        background: rgba(255,255,255,.92);
    }
    .top-menu ul { flex-wrap: wrap; }
    .top-menu li > a { width: auto; min-width: 100px; padding-left: 10px; padding-right: 10px; }
    .layout-grid,
    .no-left.has-right .layout-grid,
    .has-left.no-right .layout-grid,
    .no-left.no-right .layout-grid { display: flex; flex-direction: column; }
    .main-column { order: 1; width: 100%; min-height: 0; }
    .sidebar-left { order: 2; width: 100%; }
    .sidebar-right { order: 3; width: 100%; }
    .sidebar-left .module,
    .sidebar-left .card,
    .sidebar-left .moduletable,
    .sidebar-left .moduletable_menu { width: 100%; max-width: 100%; margin-left: 0; background: rgba(255,255,255,.88); border-radius: 8px; }
    .sidebar-left h3,
    .sidebar-left .card-header { width: 100%; background-color: rgba(255,255,255,.6); background-position: center top; }
    .date-box { margin: 10px auto; }
    .sidebar-right .module,
    .sidebar-right .card,
    .sidebar-right .moduletable,
    .sidebar-right .moduletable_menu { width: 100%; }
    .hero { min-height: 80px; background-size: cover; }
    .content-area { min-height: 0; padding: 18px; }
    .site-footer { width: 100%; grid-template-columns: 1fr; background: rgba(255,255,255,.78); }
    .footer-bottom { grid-column: auto; }
}

@media (max-width: 520px) {
    .site-header { min-height: 425px; }
    .header-search,
    .header-login { left: 50%; right: auto; transform: translateX(-50%); }
    .site-logo {
        left: 50%;
        top: 244px;
        transform: translateX(-50%);
        width: 94%;
        max-width: 94%;
        padding-left: 30px;
        text-align: center;
        font-size: 25px;
    }
    .top-menu li { flex: 1 1 50%; }
    .top-menu li > a { width: 100%; min-width: 0; }
    .breadcrumbs { padding-left: 18px; background-image: none; }
}

/* v1.3: original Qlassik regular face for navigation labels. */
.top-menu,
.left-column .module-title,
.right-column .module-title,
.bottom-modules .module-title {
    font-family: 'Qlassik2', Arial, Helvetica, sans-serif;
}