/* Connor Amenity Highlights — full-width side-by-side block */

.cgms-amenity-highlights__block {
    width: 100%;
    position: relative;
}

/* The inner wrapper holds eyebrow/title/grid above the bg overlay. */
.cgms-amenity-highlights__inner {
    position: relative;
    z-index: 2;
}

/* Dark (or any) overlay sits between the block bg and the content. */
.cgms-amenity-highlights__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* When a bg image is set, give the block a sensible default text color so
   it reads on photographs. Authors can still override via Divi or theme. */
.cgms-amenity-highlights__block--has-bg {
    color: #fff;
    background-clip: padding-box;
}

.cgms-amenity-highlights__block--has-bg .cgms-amenity-highlights__eyebrow,
.cgms-amenity-highlights__block--has-bg .cgms-amenity-highlights__title,
.cgms-amenity-highlights__block--has-bg .cgms-amenity-col__label,
.cgms-amenity-highlights__block--has-bg .cgms-amenity-col__body {
    color: inherit;
}

.cgms-amenity-highlights__eyebrow {
    margin: 0 0 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.95em;
}

.cgms-amenity-highlights__title {
    margin: 0 0 5px;
    color: #fff !important;
    font-weight: 400 !important;
}

.cgms-amenity-highlights__block--align-center { text-align: center; }
.cgms-amenity-highlights__block--align-right  { text-align: right; }

/* Each column is a flex column so the CTA can be aligned independently
   along the cross axis without relying on text-align on the wrapping <p>
   (which Divi/PPO themes sometimes override in fullwidth contexts). */
.cgms-amenity-highlights .cgms-amenity-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cgms-amenity-col__badge {
    margin: 0 0 10px;
    line-height: 0;
}

.cgms-amenity-col__badge-img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
}

.cgms-amenity-col__badge-img--rounded { border-radius: 12px; }
.cgms-amenity-col__badge-img--circle  { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.cgms-amenity-col__badge-img--square  { border-radius: 0; }

.cgms-amenity-col__label {
    margin: 0 0 8px;
    font-size: 1.05em;
    letter-spacing: 0.04em;
}

.cgms-amenity-col__body {
    margin-bottom: auto; /* push CTA to the bottom of the card */
}

.cgms-amenity-col__body ul {
    margin: 0 0 16px;
    padding-left: 1.25em;
}

.cgms-amenity-col__body li + li { margin-top: 4px; }

/* CTA — wrapped in its own flex container so we can align it independently
   of body text-align and so theme rules that block-stretch buttons don't apply. */
.cgms-amenity-col__cta {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.cgms-amenity-col__cta .et_pb_button,
.cgms-amenity-col__cta a.et_pb_button,
.cgms-amenity-col__cta a {
    display: inline-block;
    width: auto;
    max-width: max-content;
    align-self: inherit;
}

/* Self-contained CTA button — immune to theme/PPO `et_pb_button` !important
   overrides. High specificity + !important so our rules win even when the old
   theme classes are still on the element. Mirrors the theme's et_pb_button look
   (Montserrat, uppercase, pill) without depending on those classes. The inline
   style paints it solid in the brand/primary color when one is set. */
.cgms-amenity-highlights .cgms-amenity-col__cta a.cgms-amenity-col__btn {
    display: inline-block !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 10px 26px !important;
    border: 0 !important;
    border-radius: 25px !important;
    background-color: var(--cgms-btn-bg, transparent) !important;
    font-family: 'Montserrat', Helvetica, Arial, Lucida, sans-serif !important;
    font-size: 17px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.cgms-amenity-highlights .cgms-amenity-col__cta a.cgms-amenity-col__btn:hover,
.cgms-amenity-highlights .cgms-amenity-col__cta a.cgms-amenity-col__btn:focus {
    background-color: #1a9790 !important;
}

/* Kill the et_pb_button arrow glyph (ETmodules icon font) that shows as a broken
   square when the theme classes linger on the button. */
.cgms-amenity-highlights .cgms-amenity-col__cta a.cgms-amenity-col__btn::before,
.cgms-amenity-highlights .cgms-amenity-col__cta a.cgms-amenity-col__btn::after {
    display: none !important;
    content: none !important;
}

/* === Per-column alignment variants === */

.cgms-amenity-col--align-left   { text-align: left;   }
.cgms-amenity-col--align-left   .cgms-amenity-col__cta { justify-content: flex-start; }

.cgms-amenity-col--align-right  { text-align: right;  }
.cgms-amenity-col--align-right  .cgms-amenity-col__cta { justify-content: flex-end; }

.cgms-amenity-col--align-center { text-align: center; }
.cgms-amenity-col--align-center .cgms-amenity-col__cta { justify-content: center; }

/* When centered, the bullet list stays readable by keeping its text left-aligned
   inside a centered inline-block. Without this, centered bullets look broken. */
.cgms-amenity-col--align-center .cgms-amenity-col__body ul {
    display: inline-block;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

/* === Card variants === */

.cgms-amenity-col--card-glass-light,
.cgms-amenity-col--card-glass-dark,
.cgms-amenity-col--card-solid {
    /* Scales down on smaller viewports; stays tight on desktop. */
    padding: clamp(12px, 0.9vw, 16px);
    border-radius: 14px;
    height: 100%; /* fill the stretched grid row so sibling cards match height */
}

.cgms-amenity-col--card-glass-light {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: #fff;
}

.cgms-amenity-col--card-glass-light a:not(.et_pb_button) {
    color: #24827e;
    text-decoration: underline;
}

.cgms-amenity-col--card-glass-dark {
    background: rgba(15, 22, 30, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: #fff;
}

.cgms-amenity-col--card-glass-dark a:not(.et_pb_button) {
    color: #fff;
    text-decoration: underline;
}

.cgms-amenity-col--card-solid {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Equal-height columns: when any card style is active, force the grid to
   stretch its items so every card matches the tallest one. This overrides the
   inline align-items value (which is driven by the `valign` setting). */
.cgms-amenity-highlights--card-glass-light,
.cgms-amenity-highlights--card-glass-dark,
.cgms-amenity-highlights--card-solid {
    align-items: stretch !important;
}

/* Tablets/phones: collapse to a single column a bit earlier than before. */
@media (max-width: 768px) {
    .cgms-amenity-highlights[style*="repeat("] {
        grid-template-columns: 1fr !important;
    }
}
