/* ============================================================
   FOUR SCYTHES — THINNER / NASTIER DISTRESSED ROPE BORDER
   Version: 5.0 — less decorative, more rotten, thinner profile
   ============================================================ */

:root {
    --fs-rope-border-image: url("../img/distressed-red-rope-border.svg");
    --fs-rope-fallback: #55100d;
    --fs-rope-glow: rgba(78, 8, 7, .22);
    --fs-rope-panel: rgba(7, 7, 7, .88);
}

.fs-rope-border,
.fs-rope-border--thin,
.fs-rope-section,
.fs-rope-media {
    position: relative;
    border-style: solid !important;
    border-color: transparent !important;
    border-image-source: var(--fs-rope-border-image) !important;
    border-image-slice: 26 !important;
    border-image-width: 9px !important;
    border-image-outset: 0 !important;
    border-image-repeat: round !important;
}

.fs-rope-border {
    border-width: 7px !important;
    background: var(--fs-rope-panel);
    box-shadow: 0 0 6px var(--fs-rope-glow), inset 0 0 10px rgba(0,0,0,.38);
}

.fs-rope-border--thin {
    border-width: 7px !important;
    background: var(--fs-rope-panel);
    box-shadow: 0 0 5px rgba(78,8,7,.20), inset 0 0 8px rgba(0,0,0,.32);
}

.fs-rope-section {
    border-width: 7px !important;
    background: rgba(5,5,5,.74);
    box-shadow: 0 0 6px rgba(78,8,7,.18), inset 0 0 16px rgba(0,0,0,.28);
}

.fs-rope-media {
    border-width: 7px !important;
    overflow: hidden;
    background-color: transparent !important;
    box-shadow: 0 0 6px rgba(78,8,7,.18);
}

.fs-rope-media img,
.fs-rope-media video,
.fs-rope-media iframe {
    display: block;
    width: 100%;
}

.fs-rope-pad-sm { padding: 12px; }
.fs-rope-pad-md { padding: 18px; }
.fs-rope-pad-lg { padding: 24px; }

.attractions-overview .attraction-card.fs-rope-border--thin,
.attractions-overview .attraction-card.fs-rope-border--thin:hover,
.fs-rope-border,
.fs-rope-border--thin,
.fs-rope-section,
.fs-rope-media {
    border-style: solid !important;
    border-color: transparent !important;
    border-width: 7px !important;
    border-image-source: var(--fs-rope-border-image) !important;
    border-image-slice: 26 !important;
    border-image-width: 9px !important;
    border-image-repeat: round !important;
}

@media (max-width: 767.98px) {
    .fs-rope-pad-lg { padding: 18px; }
    .fs-rope-pad-md { padding: 14px; }
    .fs-rope-pad-sm { padding: 10px; }
}

/* ============================================================
   DEMO3 INTERNAL PAGES — APPLY SAME DISTRESSED ROPE TO PANELS
   Scoped so the homepage is not changed.
   ============================================================ */
body.fs-internal-page .contentInner {
    position: relative;
    border: 7px solid #55100d !important; /* visible fallback if SVG cannot load */
    border-image-source: var(--fs-rope-border-image) !important;
    border-image-slice: 26 !important;
    border-image-width: 9px !important;
    border-image-outset: 0 !important;
    border-image-repeat: round !important;
    box-shadow: 0 0 6px rgba(78,8,7,.22), inset 0 0 10px rgba(0,0,0,.35);
}

/* Keep the thin rope from crowding small screens. */
@media (max-width: 767.98px) {
    body.fs-internal-page .contentInner {
        border-width: 6px !important;
        border-image-width: 8px !important;
    }
}

/* ============================================================
   BLOG LIST — SAFE ROPE THUMBNAIL ENHANCEMENT
   Scoped to body.fs-blog-list only. No global layout changes.
   ============================================================ */
body.fs-blog-list article.ssss > a:first-child {
    display: block;
}

body.fs-blog-list article.ssss > a:first-child img {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 6px solid var(--fs-rope-fallback) !important;
    border-image-source: var(--fs-rope-border-image) !important;
    border-image-slice: 26 !important;
    border-image-width: 8px !important;
    border-image-outset: 0 !important;
    border-image-repeat: round !important;
    background: #050505;
    border-radius: 14px !important;
    box-shadow: 0 0 7px rgba(78,8,7,.24), 0 4px 14px rgba(0,0,0,.45);
}

@media (max-width: 767.98px) {
    body.fs-blog-list article.ssss > a:first-child img {
        border-width: 5px !important;
        border-image-width: 7px !important;
    }
}