/* Arctell Sandvík — one block per section partial, in the order they appear in
   template-parts/sections/. */

/* ---------- Hero ---------- */

.hero__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-display-xl);
	line-height: 1.02;
	letter-spacing: var(--ls-display);
	color: var(--text-strong);
	max-width: 16ch;
	margin-block: 16px 24px;
}
.hero__lede { font-size: var(--fs-lead); max-width: 46ch; }
.hero__text { margin-top: 24px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hero__actions:empty { display: none; }

/* A photo hero also carries .sv-on-dark (see hero.php), which supplies the colours;
   only the lede is brighter than the rest. Everything below is photo geometry. */
.hero--photo { min-height: 72vh; display: flex; align-items: flex-end; }
.hero--photo .hero__media { position: absolute; inset: 0; }
.hero--photo .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero--photo .hero__media::after { content: ''; position: absolute; inset: 0; background: var(--scrim-hero); }
.hero--photo .hero__inner { position: relative; }
.hero--photo .hero__lede { color: var(--text-on-dark); }
/* The eyebrow too. At 12px it is the smallest text on the page and needs 4.5:1, which the
   muted grey cannot reach over a photograph at any scrim this side of opaque. */
.hero--photo .eyebrow { color: var(--text-on-dark); }

/* ---------- Text and text + image ---------- */

.text-section__inner { max-width: 820px; }
.text-section .h2 { margin-bottom: 24px; }

/* The intro - a text section directly below a hero - is the page's opening paragraph, not
   a mid-page aside, so it drops the narrow centred column, lines up with every other
   section and runs at lede size. The measure still caps the line length; 68ch at 21px is
   about as far as Icelandic compounds read comfortably. */
.hero + .text-section .text-section__inner { max-width: var(--content-max); }
.hero + .text-section .prose { font-size: var(--fs-lead); max-width: 68ch; }

.text-image__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 48px clamp(40px, 6vw, 96px);
	align-items: center;
}
.text-image--mirror .text-image__media { order: -1; }
.text-image__text .h2 { margin-bottom: 20px; }
.text-image__text .arrow-link { margin-top: 28px; }
.text-image__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.text-image__media figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }

@media (max-width: 760px) {
	.text-image--mirror .text-image__media { order: 0; }
}

/* ---------- Pillars ---------- */

.pillars__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 48px;
	margin-top: clamp(40px, 5vw, 72px);
}
.pillar__num {
	font-family: var(--font-sans);
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	color: var(--text-on-dark-muted);
	margin-bottom: 16px;
}
.pillar__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-h3);
	line-height: 1.15;
	margin-bottom: 14px;
}
.pillar .arrow-link { margin-top: 20px; }

/* ---------- Quote ---------- */

.quote-section__inner { max-width: 900px; }
.quote {
	border-top: 1px solid var(--border-strong);
	border-bottom: 1px solid var(--border-hairline);
	padding-block: clamp(28px, 4vw, 48px);
}
.quote p {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-quote);
	line-height: 1.22;
	letter-spacing: var(--ls-heading);
	color: var(--text-strong);
}
.quote cite {
	display: block;
	margin-top: 24px;
	font-style: normal;
	font-size: var(--fs-small);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ---------- Facilities ---------- */

.facilities__lede { font-size: var(--fs-lead); max-width: 52ch; margin-top: 8px; }
/* Three across at most, for the same reason as the tiers grid: six facilities over four
   columns leave an orphaned pair, and the labels are long enough to want the width. */
.facilities__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(280px, 100% / 3), 1fr));
	border-top: 1px solid var(--border-strong);
	margin-top: 32px;
}
.facility {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 24px 18px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: var(--fs-small);
	color: var(--text-strong);
}
.facilities__note { margin-top: 24px; font-size: var(--fs-small); color: var(--text-muted); max-width: var(--measure); }

/* ---------- Membership tiers ---------- */

.tiers__lede { font-size: var(--fs-lead); max-width: 52ch; margin-top: 8px; }
/* Three across at most. The individual tiers run to six, and a fourth column leaves an
   orphaned pair on the second row; a third of the row as the track floor caps the count
   without a breakpoint, and 260px keeps the usual fall to two columns and then one. */
.tiers__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(max(260px, 100% / 3), 1fr));
	border-top: 1px solid var(--border-strong);
	margin-top: clamp(32px, 4vw, 56px);
}
.tier {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 28px 36px 0;
	border-bottom: 1px solid var(--border-hairline);
}
.tier__num {
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	color: var(--text-muted);
}
.tier__name {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: var(--fs-h3);
	line-height: 1.15;
	color: var(--text-strong);
	/* Tier names are long in Icelandic (Ótakmarkaður aðgangur að föstum borðum). */
	text-wrap: balance;
}
.tier__price {
	margin-top: auto;
	padding-top: 16px;
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-lead);
	font-weight: 600;
	color: var(--text-strong);
}
.tier__period { display: block; font-size: var(--fs-label); font-weight: 400; letter-spacing: .04em; color: var(--text-muted); }
.tier__price--text { font-size: var(--fs-small); font-weight: 400; color: var(--text-muted); }
.tiers__vat, .tiers__note { margin-top: 24px; font-size: var(--fs-small); color: var(--text-muted); max-width: var(--measure); }

/* ---------- Office sizes ---------- */

.offices__table { margin-top: 40px; font-variant-numeric: tabular-nums; }
.offices__table th, .offices__table td {
	text-align: left;
	padding: 16px 20px 16px 0;
	border-bottom: 1px solid var(--border-hairline);
	font-size: var(--fs-small);
}
.offices__table thead th {
	border-bottom: 1px solid var(--border-strong);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
}
.offices__table tbody th { font-weight: 600; color: var(--text-strong); }
.offices__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }

/* ---------- Floor guide ---------- */

/* This heading carries a whole sentence, not a two-word label, so it runs wider than
   .h2's own measure; at 22ch it breaks into four lines. */
.floors__heading { max-width: 34ch; }

.floors__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 32px;
	margin-top: 32px;
}
.floor { border-top: 1px solid var(--border-strong); padding-top: 18px; }
.floor__label {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-accent);
	margin-bottom: 10px;
}
.floor__text { font-size: var(--fs-small); }

/* ---------- Events ---------- */

.events__lede { font-size: var(--fs-lead); max-width: 52ch; margin-bottom: 8px; }
.events__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 40px;
	margin-block: clamp(32px, 4vw, 56px) 40px;
}
.event-card { display: grid; gap: 18px; border-top: 1px solid var(--border-strong); padding-top: 20px; }
.event-card__media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.event-card__body { display: grid; gap: 12px; }
.event-card .eyebrow { margin: 0; display: flex; gap: 10px; }
.event-card__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); line-height: 1.15; }
.event-card__title a { text-decoration: none; }
.event-card__text { font-size: var(--fs-small); color: var(--text-muted); }
.event-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
/* The related list ends the section; the grid's bottom margin is for the link under it. */
.events--more .events__list { margin-bottom: 0; }

.events__empty {
	margin-top: 32px;
	padding: 28px 0;
	border-top: 1px solid var(--border-strong);
	border-bottom: 1px solid var(--border-hairline);
	font-size: var(--fs-lead);
	color: var(--text-muted);
}

/* ---------- Timeline ---------- */

.timeline__list { margin-top: 40px; border-top: 1px solid var(--border-strong); }
.timeline__entry {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 24px;
	padding-block: 28px;
	border-bottom: 1px solid var(--border-hairline);
}
.timeline__year {
	font-variant-numeric: tabular-nums;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	color: var(--text-accent);
}
@media (max-width: 640px) {
	.timeline__entry { grid-template-columns: 1fr; gap: 10px; }
}

/* ---------- Contact ---------- */

/* Not an even split: the details side is an address, an email and a phone number, while
   the form holds seven fields, so the width goes where the content is. minmax(0, ...)
   rather than a bare fraction, so a long unbroken word cannot push a track wider. */
.contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 56px clamp(40px, 6vw, 96px);
}
@media (max-width: 860px) {
	.contact__grid { grid-template-columns: 1fr; }
}
.contact__list { display: grid; gap: 4px; margin-top: 32px; }
.contact__list dt {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-top: 16px;
}
.contact__list dd { font-size: var(--fs-small); color: var(--text-strong); }
.contact__form { background: var(--bone); padding: clamp(24px, 3vw, 36px); }
.contact__placeholder { font-size: var(--fs-small); color: var(--text-muted); }

/* Gravity Forms, scoped to the contact column so a form placed anywhere else keeps
   whatever Gravity gives it. Worth knowing: this install ships
   gravity-forms-orbital-theme.min.css as a zero-byte file, so the form arrives with only
   Gravity's reset and layout and everything visual here is ours. If that file is ever
   repaired by an update, these rules still win on specificity. */

.contact__form .gform_wrapper { font-family: var(--font-sans); }

/* Gravity lays the fields out on its own twelve-column grid, so the row gap comes from
   its variable rather than from anything declared here - 40px by default, which is a lot
   of air for a seven-field form in a single column. */
.contact__form .gform-theme { --gf-form-gap-y: 20px; }
.contact__form .gfield { grid-column: 1 / -1; display: grid; gap: 6px; }

.contact__form .gform-field-label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--text-strong);
}
.contact__form .gfield_required { color: var(--text-accent); font-weight: 400; }
.contact__form .gfield_description {
	padding: 0;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	color: var(--text-muted);
}

/* Scoped through .gform_wrapper for the extra class: Gravity's framework sheet sets a
   fixed 38px height on controls, which clips the select's own text under this padding. */
.contact__form .gform_wrapper :is(input[type='text'], input[type='email'], input[type='tel'], select),
.contact__form .gform_wrapper textarea {
	width: 100%;
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-1);
	background: var(--white);
	font: inherit;
	font-size: var(--fs-small);
	color: var(--text-body);
	transition: border-color var(--dur-base) var(--ease-out);
}
.contact__form :is(input, select, textarea):hover { border-color: var(--border-strong); }
/* Gravity's foundation sheet puts min-block-size: 12rem on textarea.medium - a minimum,
   so it wins over any height, including an inline one. Clearing it takes one class more
   than that rule carries, since Gravity's stylesheets load after this one and a tie would
   go to them. 128px is about five lines, against ten from the rows attribute. */
.contact__form .gform_wrapper .gfield .ginput_container textarea {
	min-height: 0;
	height: 128px;
	resize: vertical;
}
.contact__form ::placeholder { color: var(--text-muted); opacity: 1; }

/* The consent row is a checkbox beside its own sentence; its legend labels the pair. */
.contact__form .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.contact__form .ginput_container_consent input { margin-top: 3px; accent-color: var(--ink); }
.contact__form .gfield_consent_label {
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--text-body);
}

/* The submit button carries .btn from the gform_submit_button filter, but Gravity's
   framework sheet outranks a single class and paints it its own blue, so the primary
   button's look is restated here at a weight that wins. Same tokens, one source. */
.contact__form .gform_wrapper .gform_button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	padding: 14px 22px;
	border: 1px solid var(--action-primary);
	border-radius: var(--radius-2);
	background: var(--action-primary);
	color: var(--action-primary-text);
	font-family: var(--font-sans);
	font-size: var(--fs-small);
	font-weight: 600;
}
.contact__form .gform_wrapper .gform_button:hover {
	background: var(--action-primary-hover);
	border-color: var(--action-primary-hover);
}

.contact__form .gform_required_legend {
	margin-bottom: 16px;
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	color: var(--text-muted);
}

/* Validation. No left accent border and no tinted panel - a hairline and the error
   colour, the way the rest of the site marks things. */
.contact__form .gform_validation_errors {
	padding: 16px 18px;
	border: 1px solid var(--feedback-error);
	border-radius: var(--radius-1);
	margin-bottom: 24px;
}
.contact__form .gform_submission_error { font-size: var(--fs-small); color: var(--feedback-error); }
.contact__form .validation_message {
	font-size: var(--fs-label);
	letter-spacing: var(--ls-label);
	color: var(--feedback-error);
}
.contact__form .gfield_error :is(input, select, textarea) { border-color: var(--feedback-error); }
.contact__form .gform_confirmation_message { font-size: var(--fs-lead); color: var(--text-strong); }

/* ---------- CTA bar ---------- */

.cta-bar__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
}
.cta-bar__text { margin-top: 16px; max-width: 46ch; }
.cta-bar__actions { display: flex; flex-wrap: wrap; gap: 16px; }
.cta-bar .btn--primary { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.cta-bar .btn--primary:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.cta-bar .btn--secondary { color: var(--text-on-dark); border-color: var(--border-on-dark); }
.cta-bar .btn--secondary:hover { background: rgba(245, 243, 233, .1); color: var(--text-on-dark); }

/* ---------- Card grid section ---------- */

.card-grid-section .card-grid { margin-top: clamp(32px, 4vw, 56px); }
.card__cue { color: var(--text-accent); }