/* =========================================================================
   Ganesh Chaturthi store-page cross-link (.gcc)
   Rendered by resources/views/website/country/partials/ganesh-chaturthi-cta
   on the three participating Chennai store pages and the Chennai city index.
   It is a STATIC card, not a link — the offer has no landing page — so there
   are no hover/focus affordances and no trailing arrow.
   Mobile-first; the row never wraps below 320px.
   ========================================================================= */

.gcc {
    display: flex;
    align-items: stretch;          /* photo fills the card's full height */
    width: 100%;
    margin: 0 0 18px;
    padding: 0;                    /* the photo is flush to the left edge */
    overflow: hidden;              /* clips the photo to the rounded corner */
    border-radius: 16px;
    color: #3d2712;
    background: linear-gradient(135deg, #fff6e8 0%, #fdece0 100%);
    border: 1px solid rgba(232, 83, 31, .3);
}

/* Dessert photo, flush left and full-bleed. Replaces the old orange "25%"
   disc: the title already says 25%, so the disc repeated it while leaving a
   half-empty column of white beside three lines of text. `position:relative`
   + an absolutely-filled img rather than `height:100%` — the latter needs a
   definite height on the parent, which a stretched flex item does not
   reliably give in every engine. */
.gcc__thumb {
    position: relative;
    flex: none;
    width: 84px;
    align-self: stretch;
    background: #f6e7c9;           /* holds the shape before the photo loads */
}
.gcc__thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gcc__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    flex: 1;
    padding: 13px 16px;
}

.gcc__eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(90, 58, 26, .7);
}
.gcc__title {
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.25;
    color: #5a3a1a;
}
.gcc__amt { color: #e8531f; }
.gcc__note {
    font-size: .82rem;
    line-height: 1.4;
    color: rgba(61, 39, 18, .68);
}

@media (min-width: 768px) {
    .gcc__thumb { width: 104px; }
    .gcc__body { padding: 15px 20px; }
    .gcc__title { font-size: 1.08rem; }
}

/* In the store hero the card sits under the action row, so cap its width to
   the CTA cluster rather than letting it stretch the full hero column — at
   1470px that left the content huddled in the first third of a 1300px band.

   Uses the GENERAL sibling combinator, not `+`: the delivery pill and the
   Independence Day card can both render between the buttons and this one, and
   `+` would silently stop matching the day either of them does. */
@media (min-width: 768px) {
    .sl-cta-buttons ~ .gcc {
        max-width: 520px;
        margin-top: 1rem;
        margin-bottom: 0;
    }
}

/* City index: the card carries its OWN width cap rather than inheriting one
   from the band. `.idc-band__inner`'s 760px max-width lives in
   independence-day-cta.css, which is pushed only when that partial renders —
   and it renders nothing now the 15 Aug offer has expired, so the wrapper is
   unstyled and the card stretched to the full 1136px hero.

   margin-inline:auto rather than flex alignment: the band's parent is
   flex-direction:column, so justify-content would centre on the VERTICAL axis
   and leave the card flush left. */
.idc-band__inner .gcc {
    max-width: 760px;
    margin-inline: auto;
}

/* India home hero. Two differences from the store/city instances:

   1. Solid white, not the cream gradient. The India hero's copy side is a
      pale cream and the gradient simply disappeared into it; white plus a
      soft shadow keeps the card reading as a card.
   2. Capped and left-aligned under .cy-hero-btns, same 520px as the store
      hero, so it lines up with the Explore Menu / Find a Store row rather
      than running the width of the hero text column.

   Keyed off the variant class rather than a sibling selector: 'country' is
   only ever rendered in this one slot, so the rule cannot leak. */
.gcc--country {
    background: #fff;
    box-shadow: 0 6px 18px rgba(90, 58, 26, .12);
    margin-top: 1.25rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .gcc--country { max-width: 520px; }
}