/**
 * Detail bodu — UX layout (2026)
 */

.pointPageBody .pointPageInside {
    background: #f1f5f9;
    padding-bottom: 24px;
}

.pointPageArticleMap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
}

.pointPageArticleMap .mapPointPage,
.pointPageArticleMap #map {
    border-radius: 16px;
    min-height: 220px;
}

.rowPointDetailLeftPanel {
    flex: 1 1 100% !important;
    max-width: none;
    min-width: 0;
}

.rowPointDetailRightPanel {
    flex: 1 1 100% !important;
    min-width: 0;
}

/* Galerie — plná šířka pravého sloupce (legacy public.css má max 400px) */
.pointPageBody #pointPageArticleBody .pointPageArticleGalery {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItemBig {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItemBig img,
.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItemImgBig {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: min(70vh, 720px);
    object-fit: cover;
}

.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItemBodySmallImgs {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    justify-content: stretch;
    width: 100%;
    float: none !important;
}

.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItem {
    width: auto !important;
    height: auto !important;
    aspect-ratio: 1;
    margin: 0 !important;
    float: none !important;
}

.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItem img,
.pointPageBody #pointPageArticleBody .pointPageArticleGaleryItemImg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.pointPageBody #pointPageArticleBody #drop-zone {
    width: 100% !important;
    /* Dřív `max-width: none` — prázdná plocha pro nahrání fotek pak byla největší
       prvek stránky (912×139 px proti 278×50 px vlastního textu bodu). */
    max-width: 460px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.detailPoint-box {
    border-radius: 14px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06) !important;
}

.detailPoint-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 8px;
}

/* --- GPS toolbar --- */
/* Navigovat + Kopírovat url stojí volně nad kartami — nejsou to údaje o bodu,
   jen dvě akce. Karta kolem nich přidávala rámeček a stín okolo dvou tlačítek,
   což zbytečně tříštilo levý sloupec. Proto se tady ruší vzhled .detailPoint-box. */
.detailPoint-gps-info-section {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 10px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible;
    box-sizing: border-box;
}

.detailPoint-gps-info-section > .clear {
    display: none;
}

.detailPoint-public-state-section {
    padding: 10px 14px !important;
}

.detailPoint-public-state-section .pointPageArticlePublicState {
    margin: 0 !important;
    width: 100%;
}

.detailPoint-gps-info-section .pointPageLeftPanelGpsView {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    font-family: var(--gc-font-mono);
    font-size: 12px !important;
    color: #64748b !important;
    background: #f1f5f9;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailPoint-gps-info-section .pointPageLeftPanelGpsButton,
.detailPoint-gps-info-section #pointPageCopyUrlToClipboardPoint {
    flex: 0 1 auto !important;
    float: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.detailPoint-gps-info-section .detailPoint-gps-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 100%;
    flex: 1 1 100%;
}

.detailPoint-gps-info-section .detailPoint-gps-actions .pointPageLeftPanelGpsButton,
.detailPoint-gps-info-section .detailPoint-gps-actions #pointPageCopyUrlToClipboardPoint {
    flex: 0 0 auto !important;
    max-width: none;
    width: auto;
}

/* Sbalené nastavení sedí ve stejném boxu jako Navigovat / Kopírovat url,
   ale patří mu vlastní řádek přes celou šířku — není to další tlačítko. */
.detailPoint-gps-info-section .detailPoint-gps-actions .detailPoint-gps-settings {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 2px 0 0;
}

.detailPoint-gps-info-section .detailPoint-gps-actions .detailPoint-gps-settings .detailPoint-collapse {
    background: #f8fafc;
}

.detailPoint-gps-info-section .detailPoint-gps-actions .btnSet {
    width: auto;
    min-width: 0;
}

/* Úzký levý sloupec: GPS na celý řádek, tlačítka pod sebou v 50 % */
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .pointPageLeftPanelGpsView {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .pointPageLeftPanelGpsButton,
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section #pointPageCopyUrlToClipboardPoint {
    flex: 1 1 calc(50% - 4px) !important;
    max-width: calc(50% - 4px);
}

.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions .pointPageLeftPanelGpsButton,
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions #pointPageCopyUrlToClipboardPoint {
    flex: 0 0 auto !important;
    max-width: none;
    width: auto;
}

.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .detailPoint-gps-actions .btnSet {
    width: auto;
}

.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section .pointPageLeftPanelGpsButton:only-child,
.pointPageBody .rowPointDetailLeftPanel .detailPoint-gps-info-section #pointPageCopyUrlToClipboardPoint:only-child {
    flex: 1 1 100% !important;
    max-width: 100%;
}

.detailPoint-gps-info-section .btnSet {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-shadow: none !important;
    white-space: nowrap;
    padding: 6px 8px !important;
    font-size: 12px !important;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detailPoint-gps-info-section .glyphicon-copy-text,
.detailPoint-gps-info-section .glyphicon-share-alt-text {
    margin-right: 6px !important;
}

/* --- Autor karta ---
   Kompaktní podoba: avatar sedí vedle jména, profilové pozadí se nezobrazuje.
   Dřív měla karta 120px vysoké pozadí + avatar pod ním, což zabíralo přes
   200 px svislého místa, aniž by to o bodu cokoli říkalo. */
.detailPoint-user-info-section {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    overflow: hidden;
}

.detailPoint-user-card-body {
    padding: 12px 14px;
    text-align: left;
    clear: both;
    width: 100%;
    box-sizing: border-box;
}

.detailPoint-user-head {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.detailPoint-user-head-avatar {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.detailPoint-user-head .detailPoint-profile-pic {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    background-color: #fff;
    border: 2px solid #fff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    display: block;
    position: static !important;
    margin: 0 !important;
    /* public.css má na .detailPoint-profile-pic ještě `transform: translateY(30%)`
       z časů, kdy avatar přesahoval přes profilové pozadí. Pozadí je pryč,
       position i rozměry se tu přepisují, ale transform zůstával a tlačil
       obrázek o 30 % výšky (≈14 px) pod jméno. */
    transform: none !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
}

.detailPoint-user-head-text {
    min-width: 0;
    flex: 1 1 auto;
}

.detailPoint-user-details {
    float: none !important;
    width: 100% !important;
    margin-top: 0 !important;
    text-align: left !important;
}

.detailPoint-user-details > div {
    text-align: left !important;
}

.detailPoint-user-details h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: left !important;
}

.detailPoint-user-details h3 a {
    display: block;
    text-align: left !important;
    text-decoration: none !important;
}

.detailPoint-user-details-name {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
    color: #0f172a !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detailPoint-user-info-section .pointPageOwnerRatingStrip {
    padding-left: 0 !important;
    margin: 2px 0 0 !important;
}

.detailPoint-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 0 !important;
    border-top: none !important;
}

.detailPoint-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    border-radius: 999px;
    line-height: 1.2;
}

.detailPoint-meta-chip .glyphicon {
    font-size: 11px;
    color: #94a3b8;
}

.detailPoint-meta-chip--category {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Bod čeká na schválení — vidí ho zatím jen autor. */
.detailPoint-meta-chip--pending {
    background: #fef3c7;
    color: #92400e;
}

.detailPoint-meta-chip--pending .glyphicon {
    color: #b45309;
}

/* Bod zamítnutý moderací — taky jen pro autora, ale červeně, ať se to neplete
   s „čeká": čekání samo přejde, zamítnutí ne. */
.detailPoint-meta-chip--rejected {
    background: #fee2e2;
    color: #991b1b;
}

.detailPoint-meta-chip--rejected .glyphicon {
    color: #b91c1c;
}

/* Vlastní komentář, který ještě neprošel moderací (nebo byl zamítnut). */
.detailPoint-comment-state {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background: #fef3c7;
    color: #92400e;
    vertical-align: middle;
}

.detailPoint-comment-state--rejected {
    background: #fee2e2;
    color: #991b1b;
}

/* ===========================================================================
   Karta bodu — čtyři jasně oddělené vrstvy místo jednoho chumlu
   ---------------------------------------------------------------------------
     1. kdo    — avatar + jméno + štítek viditelnosti + hodnocení
     2. co     — meta chipy (kdy, kolik zhlédnutí, kategorie)
     3. akce   — palce + Okomentovat
     4. správa — sbalené nastavení viditelnosti a kategorie (jen vlastník)

   Vrstvy dělí vlasová linka přes celou šířku karty. Aby linka šla od kraje
   ke kraji i při vnitřním odsazení karty, roztahují se řádky zápornými
   okraji o hodnotu paddingu (14 px) a padding si vracejí zpět.
   =========================================================================== */
.detailPoint-user-card-body > .pointActionsWrap,
.detailPoint-user-card-body > .detailPoint-card-settings {
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    border-top: 1px solid #eef2f7;
}

.detailPoint-user-card-body > .pointActionsWrap {
    margin-top: 12px;
    padding-top: 12px;
}

/* Uvnitř akční lišty už vlastní linka být nemá — dělá ji rodič výš. */
.detailPoint-user-card-body .pointActionsBar {
    border-top: none;
    padding-top: 0;
    justify-content: flex-start;
    gap: 10px;
}

/* Levý sloupec detailu je úzký (~260 px použitelných) a šířka řádku kolísá —
   jakmile u palců přibudou počty, přestane se „Okomentovat" vedle nich vejít.
   Řeší se to zalomením, ne smršťováním: `nowrap` sice zalomení zabrání, ale
   tlačítko pak vyleze z karty, což je horší. Palce si drží svou velikost,
   tlačítko dobírá zbytek řádku — a když ho je málo, spadne na vlastní řádek
   přes celou šířku. Obě polohy tak vypadají záměrně. */
.detailPoint-user-card-body .pointReactionGroup {
    flex: 0 0 auto;
}

.detailPoint-user-card-body .pointFbActionBtn {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 0 12px;
    font-size: 14px;
    gap: 7px;
}

/* Nastavení jako tichá patička karty: bez vlastního rámečku a pozadí,
   ať nepůsobí jako další vnořená karta. */
.detailPoint-user-card-body > .detailPoint-card-settings {
    margin-top: 12px;
    margin-bottom: -12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.detailPoint-user-card-body > .detailPoint-card-settings .detailPoint-collapse {
    border: 0;
    border-radius: 0;
    background: transparent;
}

.detailPoint-user-card-body > .detailPoint-card-settings .detailPoint-collapse-summary {
    padding: 10px 0;
    font-size: 13px;
    color: #64748b;
}

.detailPoint-user-card-body > .detailPoint-card-settings .detailPoint-collapse-summary:hover {
    background: transparent;
    color: #334155;
}

.detailPoint-user-card-body > .detailPoint-card-settings .detailPoint-collapse-summary .glyphicon {
    color: #94a3b8;
}

.detailPoint-user-card-body > .detailPoint-card-settings .detailPoint-collapse-body {
    padding-left: 0;
    padding-right: 0;
}

/* Hlavička: avatar drží u jména, štítek se zalomí až za ním. */
.detailPoint-user-card-body .detailPoint-user-head {
    align-items: flex-start;
    gap: 12px;
}

.detailPoint-user-card-body .detailPoint-user-nameline {
    align-items: center;
    row-gap: 4px;
}

/* Meta chipy na jednom toku, o něco drobnější — je to doplňkový údaj. */
.detailPoint-user-card-body .detailPoint-meta-chips {
    margin-top: 10px;
    gap: 6px 8px;
}

/* Štítek viditelnosti stojí v téže řadě jako datum / zhlédnutí / kategorie,
   tak musí mít i stejnou výšku a odsazení — jinak by řadu rozhodil. */
.detailPoint-user-card-body .detailPoint-meta-chip--state {
    padding: 4px 9px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

.detailPoint-user-card-body .detailPoint-meta-chip {
    padding: 4px 9px;
    font-size: 11.5px;
}

/* --- Akční lišta detailu bodu (palce + Okomentovat) --- */
.pointActionsWrap {
    margin-top: 14px;
    width: 100%;
}

.pointActionsBar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid #e2e8f0;
    padding-top: 12px;
}

.pointReactionGroup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pointReactionItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pointReactionOrb {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #64748b;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.pointReactionOrb .glyphicon {
    font-size: 18px;
    top: 0;
}

.pointReactionOrb:hover,
.pointReactionOrb:focus {
    transform: translateY(-1px);
    outline: none;
}

.pointReactionOrb--up {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #64748b;
}

.pointReactionOrb--down {
    background: linear-gradient(180deg, #fde8e8 0%, #fccaca 100%);
    color: #e57373;
}

.pointReactionOrb--down:hover,
.pointReactionOrb--down:focus {
    color: #dc6060;
}

.pointReactionOrb--up.pointReactionOrb--active {
    background: linear-gradient(180deg, var(--gc-primary-strong, #0069d9) 0%, var(--gc-primary-darker, #0056b3) 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.35);
}

.pointReactionOrb--up.pointReactionOrb--active:hover,
.pointReactionOrb--up.pointReactionOrb--active:focus {
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.42);
}

.pointReactionOrb--down.pointReactionOrb--active {
    background: linear-gradient(180deg, var(--gc-danger-strong, #dc2626) 0%, var(--gc-danger-darker, #b91c1c) 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.28);
}

.pointReactionOrb--down.pointReactionOrb--active:hover,
.pointReactionOrb--down.pointReactionOrb--active:focus {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.34);
}

.pointReactionCount {
    min-width: 0.75em;
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #334155;
    line-height: 1;
}

.pointReactionCount:empty {
    display: none;
}

/* Okomentovat — dlaždice ve stejném jazyce jako palce vedle ní (viz .pointReactionOrb). */
.pointFbActionBtn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    background: #eef2f7;
    color: #475569;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pointFbActionBtn:hover,
.pointFbActionBtn:focus {
    background: #e2e8f0;
    color: #1e293b;
    outline: none;
}

.pointFbActionBtn:active {
    background: #d7dfe9;
}

.pointFbActionBtn .glyphicon {
    font-size: 18px;
    top: 0;
    color: inherit;
}

@media screen and (max-width: 480px) {
    .pointReactionGroup {
        gap: 10px;
    }

    .pointReactionOrb {
        width: 36px;
        height: 36px;
    }

    .pointReactionOrb .glyphicon {
        font-size: 16px;
    }

    .pointReactionCount {
        font-size: 14px;
    }

    .pointFbActionBtn {
        height: 36px;
        font-size: 13px;
        gap: 6px;
        padding: 0 12px;
        border-radius: 12px;
    }

    .pointFbActionBtn .glyphicon {
        font-size: 16px;
    }
}

.detailPoint-user-card-body > .pointPageHashtagsSection {
    margin: 14px 0 0 !important;
    width: 100%;
}

/* --- Popis --- */
.detailPoint-description-info-section {
    padding: 18px 18px 20px !important;
}

.detailPoint-description-info-section .detailPoint-section-label {
    margin-bottom: 10px;
}

.pointPageArticleText {
    font-size: 15px;
    line-height: 1.65;
    color: #334155;
}

/* Tlačítko „Přeložit" leží POD popisem — odsazení nahoru i dolů, ať mezi textem,
   tlačítkem a tím, co následuje (fotky, karty), zůstane mezera. */
.pointPageArticleTextTranslate {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
}

.pointPageArticleTextTranslate:hover {
    text-decoration: underline;
}

/* --- Galerie --- */
.detailPoint-galery-info-section {
    padding: 14px !important;
}

.detailPoint-galery-info-section .detailPoint-section-label {
    padding: 2px 4px 12px;
}

.pointPageArticleGaleryItemBig {
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 8px;
}

.pointPageArticleGaleryItemImgBig {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.pointPageArticleGaleryItemBodySmallImgs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.pointPageArticleGaleryItem {
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1;
}

.pointPageArticleGaleryItemImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#drop-zone.upload-button {
    width: 100%;
    margin-top: 12px;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    padding: 16px;
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
}

#drop-zone.upload-button:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.pointPageArticlePublicState {
    display: flex !important;
    align-items: center !important; /* ikona na výšku vycentrovaná s textem */
    gap: 10px !important;
    margin: 0 0 14px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-align: left !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    background-image: none !important;
}

.pointPageArticlePublicState-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    display: flex;
    align-items: center;
    opacity: 0.9;
}

.pointPageArticlePublicState-text {
    flex: 1;
    min-width: 0;
}

.pointPageArticlePublicState--private {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #334155 !important;
}

.pointPageArticlePublicState--private .pointPageArticlePublicState-icon {
    color: #64748b;
}

.pointPageArticlePublicState--public-active {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
}

.pointPageArticlePublicState--public-active .pointPageArticlePublicState-icon {
    color: #059669;
}

.pointPageArticlePublicState--public-expired {
    background: #fff7ed !important;
    border-color: #fed7aa !important;
    color: #9a3412 !important;
}

.pointPageArticlePublicState--public-expired .pointPageArticlePublicState-icon {
    color: #ea580c;
}

.pointPageArticlePublicState--followers {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1e40af !important;
}

.pointPageArticlePublicState--followers .pointPageArticlePublicState-icon {
    color: #2563eb;
}

/* Veřejný bez omezení (isPublic = 5) — trvalý stav, proto sytější zelená než
   „veřejný na týden", ať se ty dva stavy na první pohled nepletou. */
.pointPageArticlePublicState--public-unlimited {
    background: #ecfeff !important;
    border-color: #a5f3fc !important;
    color: #155e75 !important;
}

.pointPageArticlePublicState--public-unlimited .pointPageArticlePublicState-icon {
    color: #0891b2;
}

@media (min-width: 769px) {
    .pointPageBody .rowPointDetailLeftRight {
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 16px;
    }

    .pointPageBody .rowPointDetailLeftPanel {
        flex: 0 1 340px !important;
        max-width: 380px !important;
        min-width: 260px;
    }

    .pointPageBody .rowPointDetailRightPanel {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .pointPageBody .pointPageArticleMap .mapPointPage,
    .pointPageBody .pointPageArticleMap #map {
        min-height: 280px;
    }
}

@media (min-width: 1024px) {
    .pointPageBody .rowPointDetailLeftPanel {
        flex: 0 0 380px !important;
        max-width: 400px !important;
    }

    .pointPageBody .pointPageArticleMap .mapPointPage,
    .pointPageBody .pointPageArticleMap #map {
        min-height: 300px;
    }
}

@media (min-width: 1400px) {
    .pointPageBody .rowPointDetailLeftPanel {
        flex: 0 0 400px !important;
    }

    .pointPageBody .pointPageArticleMap .mapPointPage,
    .pointPageBody .pointPageArticleMap #map {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .pointPageBody .detailPoint-gps-info-section .pointPageLeftPanelGpsView {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }

    .pointPageBody .detailPoint-gps-info-section .pointPageLeftPanelGpsButton,
    .pointPageBody .detailPoint-gps-info-section #pointPageCopyUrlToClipboardPoint {
        flex: 0 1 auto !important;
        max-width: none;
    }

    .pointPageBody .detailPoint-gps-info-section .detailPoint-gps-actions {
        justify-content: center;
    }

    .pointPageBody .rowPointDetailLeftRight {
        flex-wrap: wrap !important;
    }

    .rowPointDetailLeftPanel,
    .rowPointDetailRightPanel {
        max-width: none !important;
        flex: 1 1 100% !important;
    }

    .pointPageArticleMap .mapPointPage,
    .pointPageArticleMap #map {
        min-height: 180px;
    }
}

/* --- Fotky u komentáře — tlačítko + drobné náhledy pod textem --- */
.pointPageBody .pointCommentComposer {
    position: relative;
}

.pointPageBody .pointCommentPhotoBar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 7px 0 2px;
}

/* Tlačítko „Přidat fotku" (label obaluje nativní input) */
.pointPageBody .pointCommentAddBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.pointPageBody .pointCommentAddBtn:hover {
    border-color: #007bff;
    background: #eff6ff;
    color: #007bff;
}

.pointPageBody .pointCommentAddBtn i {
    font-size: 13px;
}

/* Nativní input schováme, klik obstará obalující <label>. */
.pointPageBody .pointCommentAddBtn input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pointPageBody .pointCommentPhotoCount {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;   /* kontrast 4,8:1 (bylo #94a3b8 = 2,9:1) */
    line-height: 1;
}

/* Náhledy jsou přímo položky v řádku, wrapper nesmí tvořit vlastní box. */
.pointPageBody .pointCommentPhotoPreview {
    display: contents;
}

/* --- Drobné náhledy --- */
.pointPageBody .pointCommentPhotoItem {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
}

.pointPageBody .pointCommentPhotoItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pointPageBody .pointCommentPhotoItem--loading {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 400% 100%;
    animation: pointCommentPhotoShimmer 1.2s ease-in-out infinite;
}

@keyframes pointCommentPhotoShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.pointPageBody .pointCommentPhotoRemove {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 15px;
    height: 15px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(15, 23, 42, .62);
    color: #fff;
    font-size: 11px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease;
}

.pointPageBody .pointCommentPhotoRemove:hover {
    background: #dc3545;
}

/* Při naplnění limitu zmizí jen tlačítko, náhledy musí jít odebrat. */
.pointPageBody .pointCommentComposer.is-full .pointCommentAddBtn {
    display: none;
}

/* Přetažení souboru nad formulář funguje i bez viditelné drop zóny. */
.pointPageBody .pointCommentComposer.is-dragover .pointPageBodyCommentInput textarea {
    border-color: #007bff !important;
    background: #eff6ff !important;
}

@media (prefers-reduced-motion: reduce) {
    .pointPageBody .pointCommentPhotoItem--loading {
        animation: none;
    }
}

/* Fotky u už odeslaných komentářů (renderuje datafunc/_datafunc_comments.php) */
.pointPageBody .pointBodyAddonsCommentPhotos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0;
}

.pointPageBody .pointBodyAddonsCommentPhoto {
    display: block;
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.pointPageBody .pointBodyAddonsCommentPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Sbalovací sekce (nativní <details>) ---
   Používá se pro „Nastavení viditelnosti a kategorie". Bez JS, takže funguje
   i než doběhnou skripty, a je klávesnicí ovladatelná zdarma. */
.detailPoint-collapse {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.detailPoint-collapse-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    font-weight: 600;
    font-size: .95rem;
    color: #0f172a;
    list-style: none;
    user-select: none;
}

/* Skrýt výchozí trojúhelníček ve všech prohlížečích */
.detailPoint-collapse-summary::-webkit-details-marker { display: none; }
.detailPoint-collapse-summary::marker { content: ""; }

.detailPoint-collapse-summary:hover { background: #f8fafc; }

.detailPoint-collapse-summary:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.detailPoint-collapse-summary .glyphicon {
    color: #64748b;
    font-size: .95rem;
}

.detailPoint-collapse-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Šipka se otočí po rozbalení — čistě CSS */
.detailPoint-collapse-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid #94a3b8;
    border-bottom: 2px solid #94a3b8;
    transform: rotate(45deg);
    transition: transform .15s ease;
    margin-right: 2px;
}

.detailPoint-collapse[open] .detailPoint-collapse-chevron {
    transform: rotate(-135deg);
}

.detailPoint-collapse-body {
    padding: 0 12px 12px;
    border-top: 1px solid #f1f5f9;
}

@media (prefers-reduced-motion: reduce) {
    .detailPoint-collapse-chevron { transition: none; }
}

/* Zkratka „Pozvat uživatele" pod popisem — vedle tlačítka Uložit, ale
   vizuálně druhořadá, aby si ji uživatel nespletl s uložením. */
.pointPageArticleTextEditSaveBar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.detailPoint-add-people-btn {
    background: #fff !important;
    color: #334155 !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    padding: 6px 10px !important;
}

.detailPoint-add-people-btn:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

.detailPoint-add-people-btn .glyphicon {
    margin-right: 6px;
    color: #64748b;
}

.detailPoint-add-people-bar {
    margin-top: 10px;
}

/* Hashtagy a zmínky přímo v textu popisu */
.pointPageArticleText .gc-hashtag,
.pointPageArticleText .gc-mention {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.pointPageArticleText .gc-hashtag:hover,
.pointPageArticleText .gc-mention:hover {
    text-decoration: underline;
}

/* Proužek se staršími tagy, které ještě nejsou v textu popisu */
.pointPageHashtagsSection--legacy {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

/* --- Nabídka (položky k prodeji) ---
   Prázdný stav býval velký panel s tlačítkem uprostřed prázdna. Většina bodů
   nic neprodává, takže z toho dělá jeden řádek: popisek vlevo, tlačítko vpravo. */
.listEshopItemAddBody--empty {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
}

/* public.css tenhle popisek historicky schovávalo (display:none), takže prázdná
   sekce vypadala jako osamocené tlačítko bez vysvětlení. Tady ho vracíme zpět —
   uživatel díky němu ví, k čemu Nabídka slouží. */
.listEshopItemAddBody--empty .listEshopItemAddInfo {
    display: block !important;
    flex: 1 1 200px;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.35;
    color: #64748b;
    text-align: left !important;
    background: none !important;
    border: 0 !important;
}

.listEshopItemAddBody--empty .listEshopItemAdd {
    flex: 0 0 auto;
    margin: 0 !important;
    white-space: nowrap;
}

/* Hlavička sekce těsněji */
.pointPageBody .listEshopHeader {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
}

/* --- Závěrečné stažení mezer v detailu ---
   Boxy měly velkorysé odsazení z doby, kdy jich bylo míň. Po zmenšení
   uživatelské karty a sbalení nastavení působily mezery zbytečně velké. */
.pointPageBody .rowPointDetailLeftPanel .detailPoint-box,
.pointPageBody .rowPointDetailRightPanel .detailPoint-box {
    margin-bottom: 10px !important;
}

/* Padding tu býval kvůli kartě. Karta je pryč (viz pravidlo výš v tomhle
   souboru), tlačítka mají stát na kraji sloupce jako ostatní obsah. */
.detailPoint-gps-info-section {
    padding: 0 !important;
    gap: 8px !important;
}

.detailPoint-gps-info-section .pointPageArticlePublicState {
    margin: 0 !important;
    width: 100%;
    justify-content: center;
}

.detailPoint-description-info-section {
    padding: 12px 14px !important;
}

.detailPoint-section-label {
    margin-bottom: 6px !important;
}

/* Mobil: karta autora ať se nerozpadá */
@media (max-width: 600px) {
    .detailPoint-user-head .detailPoint-profile-pic {
        width: 40px !important;
        height: 40px !important;
    }

    .detailPoint-user-card-body {
        padding: 10px 12px;
    }

    .listEshopItemAddBody--empty {
        gap: 8px;
    }
}

/* ===========================================================================
   ROZLOŽENÍ DETAILU — sjednocení rytmu a spojení "příspěvku" do jedné karty
   ---------------------------------------------------------------------------
   Dva problémy, které stály za velkými mezerami a roztříštěným dojmem:

   1) Levý panel je flex se `gap: 10px` a KAŽDÝ box měl navíc `margin-bottom:
      10px`. Rozestupy se sčítaly na 20–30 px. Rytmus teď řídí jen marginy,
      gap je vypnutý — jedno místo, kde se to nastavuje.

   2) Detail bodu je svou povahou příspěvek: kdo → co → kde → akce. Byl ale
      rozsekaný do čtyř samostatných karet, každá s vlastním rámečkem a stínem.
      Oko kvůli tomu skáče a třetina sloupce padne na mezery. Karta autora
      a popis se proto vizuálně slévají do jedné karty s tenkou dělicí linkou,
      jak je to zvykem na sociálních sítích.
   =========================================================================== */

.pointPageBody .rowPointDetailLeftPanel {
    gap: 0 !important;
}

.pointPageBody .rowPointDetailLeftPanel > .detailPoint-box,
.pointPageBody .rowPointDetailLeftPanel > .gc-invite-section {
    margin-bottom: 8px !important;
}

.pointPageBody .rowPointDetailLeftPanel > .detailPoint-box:last-of-type {
    margin-bottom: 0 !important;
}

/* Sloupce k sobě o kus blíž */
.pointPageBody .rowPointDetailLeftRight {
    gap: 16px !important;
}

/* --- Karta autora + popis = jeden příspěvek ---
   POZOR: od 2026-08-21 popis nestojí v levém panelu, ale v PRAVÉM (pod fotkami)
   — viz `rowPointDetailRightPanel` v point.phtml / pointpublic.phtml. Sousedský
   kombinátor `+` tím pádem nemá co spárovat a celá tahle sešívací skupina
   (i její mobilní protějšek na konci souboru) je bez účinku. Zůstává pro případ,
   že by se popis do levého sloupce vrátil; nové pravidlo na ni nestavět. */
.pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section:has(+ .detailPoint-description-info-section) {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: 0 !important;
    box-shadow: 0 -1px 0 rgba(15, 23, 42, .04) !important;
}

.pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section + .detailPoint-description-info-section {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: 1px solid #eef2f7 !important;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
}

/* Popisek „POPIS" nad sloučenou částí je navíc — text mluví sám za sebe */
.detailPoint-user-info-section + .detailPoint-description-info-section .detailPoint-section-label {
    display: none;
}

/* Sekce pozvání byla nejprostornější ze všech */
.pointPageBody .gc-invite-section {
    padding: 12px 14px !important;
}

/* Pravý sloupec stejným rytmem */
.pointPageBody .rowPointDetailRightPanel > .detailPoint-box {
    margin-bottom: 8px !important;
}

/* Prázdný box „Pozvaní" se nevykresluje — pozvat se dá tlačítkem pod popisem.
   Prvek zůstává v DOM (visí v něm dialog i jeho obsluha), jen není vidět
   a nezabírá místo. Jakmile je někdo pozvaný, box se objeví se seznamem. */
.gc-invite-section--hidden {
    display: none !important;
}

/* --- Jméno autora + štítek viditelnosti na jednom řádku ---
   Viditelnost byla samostatný pruh nad tlačítky. Patří ale k autorovi:
   čtenář si tak rovnou spojí, kdo bod vytvořil a komu je vidět.
   Zabírá to o jeden řádek míň a chová se to jako na sociálních sítích. */
.detailPoint-user-nameline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.detailPoint-user-nameline h3 {
    flex: 0 1 auto;
    min-width: 0;
}

/* Nickname výrazněji — je to hlavní údaj v hlavičce příspěvku.
   POZOR: kořenová velikost písma je v tomhle projektu 10px, takže rem hodnoty
   vycházejí o 37 % menší, než člověk čeká. Proto pixely. */
.detailPoint-user-details-name,
.detailPoint-user-details h3,
.detailPoint-user-details h3 a {
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.detailPoint-state-chip {
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    padding: 2px 8px !important;
    width: auto !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    background: #f1f5f9;
    color: #475569;
    border: 0 !important;
    box-shadow: none !important;
}

.detailPoint-state-chip .pointPageArticlePublicState-icon {
    font-size: 10px !important;
    top: 0 !important;
}

/* Soukromý bod ať je poznat na první pohled */
.detailPoint-state-chip.pointPageArticlePublicState--private {
    background: #fef3c7;
    color: #92400e;
}

.detailPoint-state-chip.pointPageArticlePublicState--public-expired {
    background: #fee2e2;
    color: #991b1b;
}

/* Avatar o kousek větší, ať drží proporci s větším jménem */
.detailPoint-user-head .detailPoint-profile-pic {
    width: 48px !important;
    height: 48px !important;
}

@media (max-width: 600px) {
    .detailPoint-user-details-name,
    .detailPoint-user-details h3,
    .detailPoint-user-details h3 a {
        font-size: 17px !important;
    }

    .detailPoint-user-head .detailPoint-profile-pic {
        width: 44px !important;
        height: 44px !important;
    }
}

/* Po zvětšení jména má hlavička tři řádky (jméno / viditelnost / hodnocení).
   Avatar proto zarovnat k hornímu okraji, ať neplave uprostřed. */
.detailPoint-user-head {
    align-items: flex-start;
}

.detailPoint-user-head-avatar {
    margin-top: 0;
}

/* h3 nesmí mít vlastní odsazení, jinak jméno odskočí od avatara */
.detailPoint-user-nameline h3 {
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Komentáře v detailu: stav načítání
   ---------------------------------------------------------------------------
   Seznam se stahuje asynchronně (dřív synchronně, což pozdrželo vykreslení
   celé stránky), takže je potřeba mezistav. Výška odpovídá zhruba jednomu
   komentáři, aby obsah pod seznamem po doplnění neposkočil.
   ------------------------------------------------------------------------- */
.gcCommentsLoading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 58px;
    padding: 0 2px;
}

.gcCommentsLoadingDot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gc-primary, #007bff);
    opacity: .35;
    animation: gcCommentsLoadingPulse 1s infinite ease-in-out;
}

.gcCommentsLoadingDot:nth-child(2) { animation-delay: .15s; }
.gcCommentsLoadingDot:nth-child(3) { animation-delay: .3s; }

@keyframes gcCommentsLoadingPulse {
    0%, 80%, 100% { opacity: .25; transform: scale(.85); }
    40%           { opacity: 1;   transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .gcCommentsLoadingDot { animation: none; opacity: .5; }
}

/* ==========================================================================
   Jeden sloupec (mobil): pořadí Mapa → Fotky → Popis → zbytek
   ==========================================================================
   Na jednom sloupci má být nejdřív vidět KDE to je (mapa), pak JAK to vypadá
   (fotky) a pak CO to je (popis). Fotky i popis dnes žijí v pravém panelu
   (od 2026-08-21; dřív byl popis v levém) a před ně patří ještě tlačítka
   z levého — pořadí tedy pořád nejde poskládat `order`em uvnitř jednoho panelu.

   `display: contents` oba panely „rozpustí": jejich karty se stanou přímými
   položkami `.rowPointDetailLeftRight` a jde je řadit napříč oběma sloupci.
   Selektory typu `.rowPointDetailLeftPanel > .detailPoint-box` platí dál (DOM
   se nemění), takže karty vypadají stejně — jen odsazení a mezery, které
   držely panely, musí převzít kontejner.

   Hranice 768 px = stejná, na které se rozvržení láme na jeden sloupec už
   v pravidlech výš. Tablet (od 769 px) tedy zůstává dvousloupcový beze změny —
   tam pořadí „mapa → fotky → popis" nemá smysl, sloupce běží vedle sebe.
   ========================================================================== */
@media (max-width: 768px) {
    .pointPageBody .rowPointDetailLeftRight {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        padding: 0 10px !important;      /* dřív ho měly panely */
        box-sizing: border-box !important;
    }

    .pointPageBody .rowPointDetailLeftPanel,
    .pointPageBody .rowPointDetailRightPanel {
        display: contents !important;
    }

    /* 2) fotky, 3) popis. Ostatní karty mají order 0, takže drží pořadí z DOM. */
    .pointPageBody .detailPoint-galery-info-section {
        order: -2 !important;
    }

    .pointPageBody .detailPoint-description-info-section {
        order: -1 !important;
    }

    /* Prázdné čističe floatů by jako flex položky přidaly mezeru za mezerou. */
    .pointPageBody .rowPointDetailLeftPanel > .clear,
    .pointPageBody .rowPointDetailRightPanel > .clear {
        display: none !important;
    }

    /* Mezery řeší gap kontejneru, karty už si je nepřidávají. */
    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-box,
    .pointPageBody .rowPointDetailRightPanel > .detailPoint-box {
        margin-bottom: 0 !important;
    }

    /* Popis už nesousedí s kartou autora, takže obě karty zase stojí samostatně
       (zaoblení i rámeček zpět) a nadpis „POPIS" má znovu smysl. */
    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section:has(+ .detailPoint-description-info-section) {
        border-bottom-left-radius: 14px !important;
        border-bottom-right-radius: 14px !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 2px 12px rgba(15, 23, 42, .06) !important;
    }

    .pointPageBody .rowPointDetailLeftPanel > .detailPoint-user-info-section + .detailPoint-description-info-section {
        border-top-left-radius: 14px !important;
        border-top-right-radius: 14px !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    .pointPageBody .detailPoint-user-info-section + .detailPoint-description-info-section .detailPoint-section-label {
        display: block;
    }
}

/* ==========================================================================
   Mobil: úspornější komentáře
   ==========================================================================
   Rozměry z publicredesign.css jsou dělané pro desktop (avatar 40 px, jméno
   15 px, text 14/1.6, mezery 15 px) — na 400px displeji zabral jednořádkový
   komentář skoro 100 px a diskuse byla nekonečná roláda. Tady se všechno
   sjednotí o stupeň níž; poměry zůstávají, jen se zmenší.

   Pozor: pravidla v publicredesign.css mají `!important`, takže se sem musí
   psát s `.pointPageBody` (vyšší specifičnost) a taky `!important`.
   ========================================================================== */
@media (max-width: 768px) {
    .pointPageBody .pointBodyAddonsCommentsBody {
        gap: 10px !important;
    }

    .pointPageBody div[id^="pointBodyAddonsCommentImg"] img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-width: 1px !important;
    }

    .pointPageBody .pointBodyAddonsCommentUserNameBody {
        gap: 2px 8px !important;
    }

    /* Odkaz má vlastní font-size, zmenšit obal nestačí. */
    .pointPageBody .pointBodyAddonsCommentUserName a {
        font-size: 13px !important;
    }

    .pointPageBody .pointBodyAddonsCommentUserDate {
        font-size: 11px !important;
    }

    .pointPageBody .pointBodyAddonsCommentText {
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .pointPageBody div[id^="pointBodyAddonsCommentButtonsBody"] {
        gap: 6px !important;
    }

    .pointPageBody div[id^="pointBodyAddonsCommentEdit"],
    .pointPageBody div[id^="pointBodyAddonsCommentDelete"] {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
    }

    /* Vlákna odpovědí: menší odsazení, ať se vejde i třetí úroveň. */
    .pointPageBody .pointBodyAddonsCommentReplies {
        margin-left: 10px !important;
        padding-left: 8px !important;
        gap: 8px !important;
    }

    .pointPageBody .pointBodyAddonsCommentReply {
        font-size: 11px !important;
        margin-top: 4px !important;
    }

    .pointPageBody .pointBodyAddonsCommentReplyForm textarea {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    /* Fotky u odeslaného komentáře — 120 px byla na mobilu půlka šířky. */
    .pointPageBody .pointBodyAddonsCommentPhotos {
        gap: 6px;
        margin: 4px 0;
    }

    .pointPageBody .pointBodyAddonsCommentPhoto {
        width: 84px;
        height: 84px;
        border-radius: 8px;
    }

    /* Psaní komentáře ve stejném rytmu jako výpis. */
    .pointPageBody .pointPageBodyCommentInput textarea {
        font-size: 13px !important;
        padding: 10px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }

    .pointPageBody .btnAddCommentPoint {
        font-size: 13px !important;
        padding: 8px 16px !important;
        border-radius: 10px !important;
    }

    .pointPageBody .pointCommentAddBtn {
        font-size: 11px;
        padding: 5px 9px;
    }

    .pointPageBody .pointCommentPhotoBar {
        margin: 5px 0 2px;
    }

    .pointPageBody .gcEmojiTrigger {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }

    .pointPageBody .pointCommentPhotoItem {
        width: 34px;
        height: 34px;
    }
}

/* ==========================================================================
   NAHRÁVÁNÍ FOTEK — stav během uploadu (2026-08-06)

   Původní indikátor byl 30px kroužek s ČERNÝM okrajem v boxu 45×60 px: působil
   jako artefakt a nedal tušit, kolik fotek se ještě nahrává. Teď má každá
   nahrávaná fotka svou dlaždici v rozměru budoucího náhledu (skeleton), takže
   je dopředu vidět, kolik jich přibude a kde budou.
   ========================================================================== */

.pointPageBody #uploadImagePreviewItemsEdit .uploadImagePreviewLoading {
    box-sizing: border-box;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    margin: 0 15px 15px 0;
    border: 1px solid var(--gc-border, #e2e8f0);
    border-radius: 12px;
    background: var(--gc-bg-soft, #f8fafc);
    /* Jemné probliknutí říká „pracuje se", i když spinner uvnitř přehlédnete. */
    animation: gcPointUploadPulse 1.4s ease-in-out infinite;
}

@keyframes gcPointUploadPulse {
    0%, 100% { background-color: #f8fafc; }
    50%      { background-color: #eef2f7; }
}

/* Spinner v barvě značky místo černého kroužku; kratší otáčka působí svižněji. */
.pointPageBody #uploadImagePreviewItemsEdit .uploadImagePreviewLoading .loader {
    width: 26px;
    height: 26px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--gc-primary, #007bff);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Dropzóna po dobu nahrávání: nejde na ni klikat (druhý výběr souborů by
   rozjel paralelní upload do stejného seznamu) a je vidět, že se pracuje. */
.pointPageBody #drop-zone.is-uploading {
    pointer-events: none;
    opacity: 0.65;
}

.pointPageBody #drop-zone.is-uploading .upload-button-label::after {
    content: "…";
    margin-left: 2px;
}

/* --- Koš u fotky patří do LEVÉHO HORNÍHO ROHU ---------------------------------
   `.uploadedFilesListItemDeleteEditPoint` je `position: absolute`, ale neměl
   zadané `top`/`left` — umístil se tedy tam, kam by ho posunul normální tok.
   U velké fotky je rodič flex se `justify-content: center`, takže koš skončil
   uprostřed obrázku. Rodiče (`…ItemBig` i `…Item`) mají `position: relative`,
   takže stačí ukotvit rohem. */
.pointPageBody .pointPageArticleGaleryItemBig .uploadedFilesListItemDeleteEditPoint,
.pointPageBody .pointPageArticleGaleryItem .uploadedFilesListItemDeleteEditPoint {
    top: 8px;
    left: 8px;
    margin-top: 0;
}