/* The Tides by AMIS project page. Builds on home.css and fdj.css (the project system); only The Tides' own touches live here. */

/* Film: 16:9, full width; the poster is the tower by day (Media Library sizes set on the element). Overrides fdj.css's FDJ posters. */
.amis-tides .phero{background:#1f2624}
.amis-tides .phero__media{background-color:#1f2624;background-image:var(--poster)!important}
@media (min-width:1300px){.amis-tides .phero__media{background-image:var(--poster-xl)!important}}
@media (max-width:767px){.amis-tides .phero__media{background-image:var(--poster-sm)!important}}
.amis-tides .phero__sound:hover,.amis-tides .phero__sound:focus-visible{background:rgba(31,38,36,.55)}

/* Intro: the project mark (AMIS brown, as on Fleurs de Jardin), the title, then the calls to action under the facts */
.amis-tides .pmark{max-width:360px}
.amis-tides .pmark svg path{fill:var(--brown)}
.amis-tides .pintro__title{margin-top:clamp(40px,5vw,72px)}
.pcta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(24px,2.1vw,30px)} /* the same visible gap as lede to facts */
.pcta--left{justify-content:flex-start;margin-top:28px} /* the label rhythm (.sub) */
.btn--line{background:none;border:1px solid rgba(42,38,34,.35);color:var(--ink)}
.btn--line:hover,.btn--line:focus-visible{filter:none;border-color:var(--bronze);color:var(--bronze)}
.btn--light{border-color:rgba(251,246,239,.45);color:var(--ivory)}
.btn--light:hover,.btn--light:focus-visible{border-color:var(--gold);color:var(--gold)}

/* 01: island amenities, six figures in one row; the block sits at the same distance as the map above it */
.tides-island{margin-top:clamp(32px,4vw,56px)}
.tides-island .sub{margin-top:0}
.facts--six{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:0}
.drive li.drive__note{display:block}

/* a single photograph keeps one steady frame (no slider here: few images, a fixed grid instead) */
.amis-tides .duo:has(.duo__a:only-child) .duo__a img{aspect-ratio:16/9}
.tides-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(32px,4vw,56px)} /* same gap and spacing as the image pairs */
.tides-grid figure{margin:0;overflow:hidden}
.tides-grid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--sand)}
.tides-grid figcaption{margin-top:10px;font-size:11.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)} /* as the site's image captions */
.psec--brown .tides-grid figcaption{color:var(--ivory-40)}

/* section titles: never wider than their column (long words like ARCHITECTURE): capped by the column's own width */
.amis-tides .split__label{container-type:inline-size}
.amis-tides .split__label>.h-display{font-size:min(clamp(34px,4.2vw,58px),12.6cqi)}

/* residence tabs under an intro: the same space as a section head leaves above its content (.split--head) */
.amis-tides .psec.tabs>.split+.wrap{margin-top:clamp(36px,5vw,64px)}

/* closing band */
.tides-close .h-display{max-width:10em}

@media (max-width:1100px){
	.tides-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
	.facts--six{grid-template-columns:repeat(3,minmax(0,1fr))}
	.facts--six li:nth-child(4){border-left:0;padding-left:0}
	.facts--six li:nth-child(n+4){border-top:1px solid rgba(42,38,34,.18)}
}
@media (max-width:599px){
	.pcta .btn{flex:1 1 100%}
	.facts--six{grid-template-columns:repeat(2,minmax(0,1fr))}
	.facts--six li:nth-child(4){border-left:1px solid rgba(42,38,34,.18);padding-left:clamp(12px,2vw,28px)}
	.facts--six li:nth-child(odd){border-left:0;padding-left:0}
	.facts--six li:nth-child(n+3){border-top:1px solid rgba(42,38,34,.18)}
}