/*--------------------------------------------------------------
# Event race skin
#
# Gives a race event's description the visual identity of the race's
# own landing site: its palette, its folded-corner ("origami") cards
# and its diamond markers. Typography stays the club site's own, so
# the description reads as part of this site, not a transplant.
#
# This file is enqueued only on the events opted in through
# inc/event-race-skin.php, and every selector below is confined to
# #about-content — the description block. The club's header, footer,
# navigation, event banner, registration, gallery and video sections
# are untouched, as is every other page of the site.
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Tokens — the race palette, scoped to the description block.
--------------------------------------------------------------*/

.event-race-skin #about-content {
    --rs-navy: #17235F;
    --rs-red: #B8102A;
    --rs-gold: #E7B32C;
    --rs-cream: #D3D2C5;
    --rs-ink: #1C1C1C;
    --rs-body: #3A3833;
    --rs-muted: #6B6459;
    --rs-line: rgba(23, 35, 95, .12);
    --rs-shadow: 0 18px 50px -24px rgba(23, 35, 95, .35);

    /* Size of the folded-paper corner. The panel folds wider than
       the cards inside it. */
    --rs-fold: 26px;

    /* Panel padding, as a token so the closing band can bleed back
       out to the panel edges. */
    --rs-pad: clamp(22px, 3vw, 42px);

    /* Colour showing through a fold: whatever sits behind the
       element. Cards sit on the cream panel, the panel sits on the
       white .side-right card. */
    --rs-behind: #fff;

    /* The club's own bold face — the description keeps the site's
       typography rather than importing the race site's display font.
       The weight comes from the face itself, so text is never
       synthetically bolded on top of an already-bold design. */
    --rs-display: "IRANSansWeb-Bold", "IRANSansWeb", Tahoma, sans-serif;
}

/*--------------------------------------------------------------
# The panel — turns the description into a race-branded band
# inside the club page.
--------------------------------------------------------------*/

.event-race-skin #about-content {
    position: relative;
    margin: 0 0 46px;
    padding: var(--rs-pad);
    background: var(--rs-cream);
    border-top: 3px solid var(--rs-red);
    color: var(--rs-body);
    font-size: 17px;
    line-height: 1.95;
    clip-path: polygon(var(--rs-fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rs-fold));
}

/* Closing band: the race site's origami Tehran skyline, over white
   with the red rule above it. Signs off the description the way the
   band under the race site's hero does. Decoration only — it needs
   no markup, so it cannot interfere with the content. */
.event-race-skin #about-content::after {
    content: "";
    display: block;
    height: clamp(150px, 22vw, 290px);
    margin: clamp(34px, 4vw, 52px) calc(-1 * var(--rs-pad)) calc(-1 * var(--rs-pad));
    background: #fff url("../image/race/tehran-skyline.png") no-repeat center bottom;

    /* `contain` so the whole illustration is in frame at any width — with a
       fixed width it would be cropped to the band's height. */
    background-size: contain;
    border-top: 3px solid var(--rs-red);
}

/* The folded corner itself. */
.event-race-skin #about-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--rs-fold);
    height: var(--rs-fold);
    background: linear-gradient(225deg, transparent 50%, var(--rs-behind) 50%);
    box-shadow: 3px 3px 6px -2px rgba(23, 35, 95, .28);
    pointer-events: none;
}

/* Google-Translate widget leftovers that were saved into the post
   content. They are absolutely positioned and carry a duplicate id,
   so they can only get in the way. */
.event-race-skin #about-content div[id="gtx-trans"] {
    display: none;
}

/*--------------------------------------------------------------
# Folded-corner card treatment — the race site's signature.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-card,
.event-race-skin #about-content .rs-rule,
.event-race-skin #about-content .rs-acc,
.event-race-skin #about-content .rs-note,
.event-race-skin #about-content ul > li,
.event-race-skin #about-content .vc_single_image-wrapper,
.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper {
    position: relative;
    --rs-fold: 18px;
    border-radius: 0;
    clip-path: polygon(var(--rs-fold) 0, 100% 0, 100% 100%, 0 100%, 0 var(--rs-fold));
}

.event-race-skin #about-content .rs-card::before,
.event-race-skin #about-content .rs-rule::before,
.event-race-skin #about-content .rs-acc::before,
.event-race-skin #about-content .rs-note::before,
.event-race-skin #about-content ul > li::before,
.event-race-skin #about-content .vc_single_image-wrapper::before,
.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: var(--rs-fold);
    height: var(--rs-fold);
    background: linear-gradient(225deg, transparent 50%, var(--rs-cream) 50%);
    box-shadow: 3px 3px 6px -2px rgba(23, 35, 95, .28);
    pointer-events: none;
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/

/* "درباره رویداد" — the panel headline. */
.event-race-skin #about-content > h2.title {
    margin: 0 0 8px;
    padding: 0;
    font-family: var(--rs-display);

    /* global.css sets `h2 { font-size: 22px !important }` for the whole site,
       which no amount of specificity can beat. */
    font-size: clamp(1.8rem, 3.6vw, 2.5rem) !important;
    font-weight: normal;
    line-height: 1.35;

    /* The event page centres its section titles; the race site sets them
       against the reading edge. */
    text-align: start;
    color: var(--rs-navy);
}

/* The theme prefixes .side-right headings with a shoe icon; the race
   identity uses a diamond marker instead. */
.event-race-skin #about-content > h2.title::before {
    content: "";
    display: inline-block;
    position: static;
    top: auto;
    width: 12px;
    height: 12px;
    margin: 0 0 0 14px;
    background: var(--rs-red);
    transform: rotate(45deg);
}

.event-race-skin #about-content > h2.title::after {
    content: "";
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 18px;
    background: var(--rs-gold);
}

/* Section headings inside the description. */
.event-race-skin #about-content h4 {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    text-align: start;
    gap: 12px;
    margin: 52px 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rs-line);
    font-family: var(--rs-display);
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: normal;
    line-height: 1.4;
    color: var(--rs-navy);
}

.event-race-skin #about-content h4::before {
    content: "";
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: .45em;
    background: var(--rs-red);
    transform: rotate(45deg);
}

/* The description sets its heading colour inline, so it has to be
   overridden explicitly to land on the race navy. */
.event-race-skin #about-content h4 span[style],
.event-race-skin #about-content h4 strong {
    color: var(--rs-navy) !important;
    background: none !important;
    font-weight: inherit;
}

/*--------------------------------------------------------------
# Body copy
--------------------------------------------------------------*/

.event-race-skin #about-content p {
    margin: 0 0 16px;
    text-align: justify;
    color: var(--rs-body);
}

.event-race-skin #about-content p span[style] {
    color: inherit !important;
    background: none !important;
}

/* Opening paragraph, read as the race site's lede. */
.event-race-skin #about-content .rs-lede {
    font-family: var(--rs-display);
    font-size: clamp(1.12rem, 2.2vw, 1.32rem);
    font-weight: normal;
    line-height: 1.75;
    color: var(--rs-navy);
    text-align: right;
}

/* The site's regular face has no bold cut, so browsers fake one. Point
   emphasis at the real bold face instead. */
.event-race-skin #about-content strong,
.event-race-skin #about-content b {
    font-family: var(--rs-display);
    font-weight: normal;
    color: var(--rs-navy);
}

.event-race-skin #about-content a {
    font-family: var(--rs-display);
    font-weight: normal;
    color: var(--rs-red);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

.event-race-skin #about-content a:hover {
    color: var(--rs-navy);
}

/*--------------------------------------------------------------
# Lists — white folded cards with the race's check marker.
--------------------------------------------------------------*/

.event-race-skin #about-content ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-race-skin #about-content ul > li {
    display: flex;
    gap: 13px;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--rs-line);
    list-style: none;
    font-weight: 500;
    color: var(--rs-body);
    line-height: 1.8;
}

.event-race-skin #about-content ul > li::after {
    content: "✔";
    order: -1;
    flex: none;
    color: var(--rs-red);
    font-weight: 900;
}

.event-race-skin #about-content li span[style] {
    color: inherit !important;
    background: none !important;
}

/* Ordered lists that were not rebuilt into an accordion. */
.event-race-skin #about-content ol {
    margin: 0 0 18px;
    padding-inline-start: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.event-race-skin #about-content ol > li {
    padding-inline-start: 6px;
    color: var(--rs-body);
}

.event-race-skin #about-content ol > li::marker {
    color: var(--rs-red);
    font-weight: 900;
}

/*--------------------------------------------------------------
# Registration steps — numbered squares, as on the race site.
--------------------------------------------------------------*/

.event-race-skin #about-content [data-race-block="steps"] ul {
    counter-reset: rs-step;
    gap: 14px;
}

.event-race-skin #about-content [data-race-block="steps"] ul > li {
    align-items: center;
    font-weight: 600;
    color: var(--rs-navy);
}

.event-race-skin #about-content [data-race-block="steps"] ul > li::after {
    counter-increment: rs-step;
    content: counter(rs-step);
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: var(--rs-red);
    color: #fff;
    font-family: var(--rs-display);
    font-size: 1.15rem;
    font-weight: normal;
}

/*--------------------------------------------------------------
# Race services — the compact chip grid.
--------------------------------------------------------------*/

.event-race-skin #about-content [data-race-block="services"] ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.event-race-skin #about-content [data-race-block="services"] ul > li {
    align-items: center;
    font-weight: 600;
    color: var(--rs-navy);
    text-align: right;
}

.event-race-skin #about-content [data-race-block="services"] ul > li::after {
    content: "";
    width: 10px;
    height: 10px;
    background: var(--rs-gold);
    transform: rotate(45deg);
}

/*--------------------------------------------------------------
# Rules — white cards with the race's red edge.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 22px 0 8px;
}

.event-race-skin #about-content .rs-rule {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--rs-line);
    border-inline-start: 4px solid var(--rs-red);
}

/* mobile.css sets `body { text-align: center !important }`, which would
   otherwise centre these while their bodies stay justified. */
.event-race-skin #about-content .rs-rule-t,
.event-race-skin #about-content ul > li,
.event-race-skin #about-content .rs-acc > summary {
    text-align: start;
}

.event-race-skin #about-content .rs-rule-t {
    margin-bottom: 6px;
    font-family: var(--rs-display);
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--rs-navy);
    line-height: 1.5;
}

.event-race-skin #about-content .rs-rule-d {
    font-size: .98rem;
    line-height: 1.85;
    color: var(--rs-body);
    text-align: justify;
}

.event-race-skin #about-content .rs-rule-d span[style],
.event-race-skin #about-content .rs-rule-d strong {
    color: inherit !important;
    background: none !important;
}

/*--------------------------------------------------------------
# FAQ — the race site's accordion.
--------------------------------------------------------------*/

.event-race-skin #about-content .rs-acc-list {
    margin: 22px 0 8px;
}

.event-race-skin #about-content .rs-acc {
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid var(--rs-line);
}

.event-race-skin #about-content .rs-acc > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 22px;
    list-style: none;
    cursor: pointer;
    font-family: var(--rs-display);
    font-size: 1.08rem;
    font-weight: normal;
    line-height: 1.6;
    color: var(--rs-navy);
}

.event-race-skin #about-content .rs-acc > summary::-webkit-details-marker {
    display: none;
}

.event-race-skin #about-content .rs-acc > summary::marker {
    content: "";
}

.event-race-skin #about-content .rs-plus {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    background: var(--rs-cream);
    border: 1px solid var(--rs-line);
    color: var(--rs-red);
    font-family: Tahoma, sans-serif;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.event-race-skin #about-content .rs-acc[open] .rs-plus {
    background: var(--rs-red);
    color: #fff;
    transform: rotate(45deg);
}

.event-race-skin #about-content .rs-acc-a {
    padding: 0 22px 20px;
    color: var(--rs-body);
    text-align: justify;
}

.event-race-skin #about-content .rs-acc-a strong,
.event-race-skin #about-content .rs-acc-a span[style] {
    color: inherit !important;
    background: none !important;
}

/*--------------------------------------------------------------
# Images — framed as folded cards.
--------------------------------------------------------------*/

.event-race-skin #about-content .wpb_single_image {
    margin: 26px 0;
}

.event-race-skin #about-content .vc_single_image-wrapper {
    display: block;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--rs-line);
    box-shadow: var(--rs-shadow);
    transition: transform .15s ease;
}

.event-race-skin #about-content .vc_single_image-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}

.event-race-skin #about-content a.vc_single_image-wrapper:hover {
    transform: translateY(-3px);
}

/*--------------------------------------------------------------
# Separators — the race site's diamond divider.
--------------------------------------------------------------*/

.event-race-skin #about-content .vc_separator {
    position: relative;
    margin: 46px 0;
}

.event-race-skin #about-content .vc_sep_line {
    border-color: var(--rs-line) !important;
}

.event-race-skin #about-content .vc_separator_no_text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--rs-gold);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* A separator's own label is a divider caption, not a section
   heading, so it opts out of the h4 treatment above. */
.event-race-skin #about-content .vc_separator h4 {
    display: inline-block;
    margin: 0;
    padding: 0 18px;
    border: 0;
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-family: var(--rs-display);
    font-weight: normal;
    color: var(--rs-muted);
}

.event-race-skin #about-content .vc_separator h4::before {
    display: none;
}

/*--------------------------------------------------------------
# Two-column contact row — folded cards.
--------------------------------------------------------------*/

/* Lays the pair side by side at matched heights. Where :has() is
   unsupported the builder's own float grid still gives two cards —
   only the heights stop matching. */
.event-race-skin #about-content .vc_row:has(> .vc_col-sm-6) {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin: 34px 0;
}

.event-race-skin #about-content .vc_row:has(> .vc_col-sm-6) > .vc_col-sm-6 {
    flex: 1 1 clamp(240px, 40%, 420px);
    width: auto;
    padding: 0;
}

.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner {
    height: 100%;
}

/* Compact chips — icon tile against the reading edge, label beside it —
   the shape the race site gives its service rows. Stacking the icon
   under a centred caption left a tall empty card. */
.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 15px 18px;
    background: #fff;
    border: 1px solid var(--rs-line);
    border-inline-start: 4px solid var(--rs-red);
    transition: transform .15s ease, box-shadow .2s ease;
}

.event-race-skin #about-content .vc_col-sm-6 > .vc_column-inner > .wpb_wrapper:hover {
    transform: translateY(-3px);
    box-shadow: var(--rs-shadow);
}

.event-race-skin #about-content .vc_col-sm-6 .wpb_text_column {
    flex: 1;
    width: auto;
}

.event-race-skin #about-content .vc_col-sm-6 .wpb_text_column p {
    margin: 0;
    font-family: var(--rs-display);
    font-size: 1.02rem;
    font-weight: normal;
    line-height: 1.7;
    color: var(--rs-navy);
    text-align: start;
}

/* Icon tile, ahead of the label. */
.event-race-skin #about-content .vc_col-sm-6 .wpb_single_image {
    order: -1;
    flex: none;
    margin: 0;
}

.event-race-skin #about-content .vc_col-sm-6 .vc_single_image-wrapper {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    background: var(--rs-cream);
    border: 0;
    box-shadow: none;
    clip-path: none;
}

.event-race-skin #about-content .vc_col-sm-6 .vc_single_image-wrapper::before {
    display: none;
}

/* Stretches the link over the whole chip, so the card is clickable and
   not just the badge — which is what "کلیک کن" promises. */
.event-race-skin #about-content .vc_col-sm-6 a.vc_single_image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
}

.event-race-skin #about-content .vc_col-sm-6 .vc_single_image-wrapper img {
    width: 34px;
    height: 34px;
    max-width: none;
    max-height: none;
}

/* The chip as a whole already lifts on hover. */
.event-race-skin #about-content .vc_col-sm-6 a.vc_single_image-wrapper:hover {
    transform: none;
}

/*--------------------------------------------------------------
# Gallery grid
--------------------------------------------------------------*/

.event-race-skin #about-content .vc_col-sm-4 .wpb_single_image {
    margin: 0 0 22px;
}

.event-race-skin #about-content .vc_col-sm-4 .vc_single_image-wrapper {
    padding: 8px;
}

/*--------------------------------------------------------------
# Narrow screens
--------------------------------------------------------------*/

@media only screen and (max-width: 900px) {
    .event-race-skin #about-content .rs-rule-grid,
    .event-race-skin #about-content [data-race-block="services"] ul {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 600px) {
    .event-race-skin #about-content {
        --rs-fold: 20px;
        --rs-pad: 16px;
        font-size: 16px;
    }

    .event-race-skin #about-content h4 {
        margin-top: 38px;
    }

    /* Justifying a ~280px column opens up rivers between the words. */
    .event-race-skin #about-content p,
    .event-race-skin #about-content .rs-rule-d,
    .event-race-skin #about-content .rs-acc-a {
        text-align: start;
    }

    .event-race-skin #about-content .rs-acc > summary {
        padding: 15px 16px;
    }

    .event-race-skin #about-content .rs-acc-a {
        padding: 0 16px 18px;
    }
}