/* ==========================================================================
   ISLAND AV HIRE - island-av-hire.html, on top of site.css. The banner,
   eyebrows, tiles and buttons come from site.css. Everything is .isl-

   POINTS     the boat and the battery, the two selling points
   BANDS      what comes with us, where we go
   LISTS      what the battery suits, what to send with an enquiry
   UPSELL     the quieter band under the closing call
   CLOSING    book-us band
   ========================================================================== */
#sg-island {
    background: var(--sg-night);
}

.isl-hero {
    --banner-tint: var(--sg-ink);
}

/* ==========================================================================
   POINTS
   ========================================================================== */
.isl-points {
    padding: clamp(50px, 7vw, 84px) 20px;
    border-top: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
    background: linear-gradient(180deg, var(--sg-ink) 0%, var(--sg-night) 100%);
}

.isl-points-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); /* shrinks, never pushes sideways */
    gap: clamp(28px, 5vw, 56px);
    max-width: var(--sg-max-width);
    margin: auto;
}

.isl-point h2 {
    font-family: var(--sg-font-display);
    font-size: clamp(1.7rem, 3.6vw, 2.5rem);
    line-height: 1.02;
    letter-spacing: -1.2px;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 16px;
}

.isl-point p {
    color: var(--sg-paper-line);
    font-size: 1rem;
    line-height: 1.75;
}

/* The line to remember, set apart from the paragraph */
.isl-point p.isl-point-note {
    margin-top: 16px;
    padding-left: 14px;
    border-left: 3px solid var(--sg-gold);
    color: var(--sg-gold);
    font-family: var(--sg-font-display);
    font-size: 1.1rem;
    letter-spacing: -0.3px;
    text-transform: uppercase;
}

/* ==========================================================================
   BANDS
   ========================================================================== */
.isl-band {
    max-width: var(--sg-max-width);
    margin: auto;
    padding: clamp(46px, 6vw, 76px) 20px;
}

.isl-band.is-alt {
    max-width: none;
    background: var(--sg-night);
    border-top: 1px solid var(--sg-border);
    border-bottom: 1px solid var(--sg-border);
}

.isl-band.is-alt > * {
    max-width: var(--sg-max-width);
    margin-left: auto;
    margin-right: auto;
}

.isl-band h2 {
    font-family: var(--sg-font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    letter-spacing: -1px;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
}

.isl-band .section-intro {
    margin: 8px 0 30px;
    text-align: left;
    color: var(--sg-dim);
}

/* What comes with us, and where we go: a grid of tiles */
.isl-kit,
.isl-places {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 18px;
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 560px) {
    .isl-kit,
    .isl-places {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   LISTS - short, so no card styling
   ========================================================================== */
.isl-ideal-label,
.isl-send-label {
    margin-top: 16px;
    color: var(--sg-dim);
    font-family: var(--sg-font-accent);
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.isl-ideal {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.isl-ideal li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 3px 0;
    color: var(--sg-paper-line);
    font-size: 0.95rem;
}

/* A tick drawn in CSS */
.isl-ideal li::before {
    content: '';
    width: 7px;
    height: 11px;
    flex: 0 0 auto;
    border: solid var(--sg-gold);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}

/* Numbered by the stylesheet so the number can be any size */
.isl-send {
    list-style: none;
    margin: 12px 0 22px;
    padding: 0;
    counter-reset: send;
    max-width: 52ch;
}

.isl-send li {
    counter-increment: send;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--sg-border);
    color: var(--sg-paper-line);
}

.isl-send li:last-child {
    border-bottom: 0;
}

.isl-send li::before {
    content: counter(send);
    flex: 0 0 auto;
    width: 22px;
    color: var(--sg-orange);
    font-family: var(--sg-font-display);
    font-size: 0.95rem;
}

/* "Somewhere else? Ask." under the areas */
.isl-anywhere {
    margin-top: 22px;
    color: var(--sg-dim);
    font-size: 0.95rem;
}

/* ==========================================================================
   UPSELL
   ========================================================================== */
.isl-upsell {
    padding: clamp(34px, 5vw, 56px) 20px;
    border-top: 1px solid var(--sg-border);
    background: var(--sg-night);
}

.isl-upsell-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    max-width: var(--sg-max-width);
    margin: auto;
}

.isl-upsell h2 {
    font-family: var(--sg-font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.8px;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 10px;
}

.isl-upsell p {
    max-width: 52ch;
    margin: 0;
    color: var(--sg-dim);
    line-height: 1.7;
}

.isl-upsell .btn {
    flex-shrink: 0;
}

/* ==========================================================================
   CLOSING
   ========================================================================== */
.isl-cta {
    padding: clamp(56px, 8vw, 96px) 20px;
    border-top: 1px solid var(--sg-border);
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 70%),
        linear-gradient(120deg, var(--sg-ink) 0%, var(--sg-night) 66%);
}

.isl-cta-inner {
    max-width: var(--sg-max-width);
    margin: auto;
}

.isl-cta h2 {
    font-family: var(--sg-font-display);
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 0.96;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
}

.isl-cta h2 span {
    color: var(--sg-gold);
}

.isl-cta p {
    max-width: 52ch;
    margin: 18px 0 26px;
    color: var(--sg-paper-line);
    line-height: 1.7;
}