/* ==========================================================================
   Independence Day ₹80 cross-link button — store pages.
   Scoped under .idc. Loaded only when the partial actually renders, so
   non-Chennai store pages pay nothing for it.

   Sits in a store sidebar / card list, so it has to read as a distinct
   offer without shouting over the store's own details. Mobile-first.
   ========================================================================== */

.idc {
    --idc-orange:  #FC5007;
    --idc-brown:   #663333;
    --idc-ink:     #2B1A12;
    --idc-soft:    #6B5747;
    --idc-paper:   #FFF8EE;
    --idc-rule:    #EDDCC4;
    --idc-saffron: #FF9933;
    --idc-green:   #138808;

    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    width: 100%;
    padding: .95rem 1rem .95rem 1.15rem;
    margin: 0 0 1rem;

    background:
        radial-gradient(120% 140% at 0% 0%, #FFFFFF 0%, var(--idc-paper) 55%, #FBEFDC 100%);
    border: 1px solid var(--idc-rule);
    border-radius: 10px;
    text-decoration: none;
    color: var(--idc-ink);
    overflow: hidden;

    box-shadow: 0 12px 24px -20px rgba(43, 26, 18, .55);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.idc:hover,
.idc:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(252, 80, 7, .42);
    box-shadow: 0 18px 32px -20px rgba(43, 26, 18, .6);
    color: var(--idc-ink);
    text-decoration: none;
}

.idc:focus-visible { outline: 2px solid var(--idc-orange); outline-offset: 2px; }

/* Tricolour spine — structure, not flag decoration.
   The card is cream, so a pure-white middle band disappears and the spine
   reads as two disconnected marks. A hairline on the inner edge bounds all
   three bands so the flag stays legible without darkening the white. */
.idc__flag {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(
        to bottom,
        var(--idc-saffron) 0 33.333%,
        #FFFFFF          33.333% 66.666%,
        var(--idc-green)  66.666% 100%
    );
    box-shadow: inset -1px 0 0 rgba(102, 51, 51, .16);
}

.idc__body {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;   /* let long copy wrap instead of forcing overflow */
    flex: 1;
}

.idc__eyebrow {
    font-size: .7rem;
    font-weight: 700;
    color: var(--idc-orange);
    letter-spacing: .01em;
}

.idc__title {
    font-weight: 900;
    font-size: 1.02rem;
    line-height: 1.2;
    color: var(--idc-brown);
    letter-spacing: -.012em;
}

.idc__amt {
    color: var(--idc-orange);
    font-size: 1.16em;
    letter-spacing: -.02em;
}

.idc__note {
    font-size: .8rem;
    color: var(--idc-soft);
    line-height: 1.35;
}

/* 44px circular affordance — a real tap target, not a decorative chevron. */
.idc__go {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--idc-orange);
    color: #FFFFFF;
    transition: transform .2s ease;
}

.idc:hover .idc__go { transform: translateX(3px); }

/* The non-participating variant is quieter — it's information, not an
   invitation to walk into this particular cafe. */
.idc--nearby {
    background: linear-gradient(120% 140% at 0% 0%, #FFFFFF 0%, #FAF6EE 60%, #F4EADA 100%);
}

.idc--nearby .idc__title { font-size: .98rem; }
.idc--nearby .idc__go    { background: var(--idc-brown); }

@media (prefers-reduced-motion: reduce) {
    .idc, .idc__go { transition: none; }
    .idc:hover { transform: none; }
}

@media (min-width: 861px) {
    .idc { padding: 1.05rem 1.15rem 1.05rem 1.3rem; }
    .idc__title { font-size: 1.08rem; }
    .idc__go { width: 36px; height: 36px; }
}

/* In the store hero the button sits under the action row, so cap its width
   to match the CTA cluster rather than stretching the full hero column. */
.sl-cta-buttons + .idc {
    max-width: 520px;
    margin-top: 1rem;
    margin-bottom: 0;
}

/* City-index band. Centred with margin-inline:auto rather than flex
   alignment: the parent .cy-hero-inner is flex-direction:column, so
   justify-content centres on the VERTICAL axis and leaves the card flush
   left. margin-inline works the same in block, row-flex and column-flex,
   so this can't silently break if that parent changes again. */
.idc-band { padding-top: 0; }

.idc-band__inner {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
}