/*
 * Víkingur 26: membership sign-up (page-gerast-vikingur.php). The hero is
 * the shared photo hero (components.css); the form's fields are the contact
 * page's (.vik-cform, contact.css). This file lays out the benefits beside
 * the form card, and covers what form 22 has that the contact form does not:
 * the name's two inputs, the international phone field, the department
 * checkboxes, the consent, and the two pages' buttons. Gravity Forms' own
 * theme CSS loads here (inc/join.php), so its rules are outweighed.
 */

.vik-join{padding-top:72px}
.vik-join__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:64px;align-items:start}
.vik-join__why{display:grid;gap:20px;align-content:start;min-width:0}
.vik-join__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(40px,4.4vw,64px);line-height:.88;text-transform:uppercase;text-wrap:balance}
.vik-join__lead{margin:0;font-family:var(--font-condensed);font-weight:700;font-size:20px;line-height:1.25;text-transform:uppercase}
.vik-join__list{display:grid;gap:14px;margin:8px 0 0;padding:0;list-style:none}
.vik-join__list li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5;color:var(--text-secondary)}
.vik-join__list li .vik-icon{flex:none;margin-top:3px;color:var(--vik-astrida)}
.vik-join__list b,.vik-join__list strong{color:var(--ink)}

/* ── The form card ── */
.vik-join__card{position:sticky;top:100px;padding:32px;border:1px solid var(--border-hairline);border-radius:var(--radius-card);background:var(--white);scroll-margin-top:100px}
.vik-cform .gform_wrapper.gravity-theme{margin:0}
.vik-cform .gform_wrapper.gravity-theme .gform_fields{grid-column-gap:20px!important;grid-row-gap:20px!important}
.vik-cform .gform_wrapper.gravity-theme .gfield_label{margin:0 0 8px!important;padding:0!important}
.vik-cform .gform_wrapper.gravity-theme .gfield_required_text{font-family:var(--font-body);font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--vik-astrida)}
.vik-cform .gform_wrapper.gravity-theme .gfield_description{padding-top:6px!important;font-size:14px!important;line-height:1.45;color:var(--text-secondary)}
/* The name's first and last inputs, side by side, with their small labels. */
.vik-cform .gform_wrapper.gravity-theme .ginput_complex{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vik-cform .gform_wrapper.gravity-theme .ginput_complex>span{width:auto!important;margin:0!important;padding:0!important}
.vik-cform .gform_wrapper.gravity-theme .ginput_complex label,.vik-cform .gform_wrapper.gravity-theme .gform-field-label--type-sub{display:block;margin:6px 0 0!important;padding:0!important;font-family:var(--font-body);font-size:13px!important;color:var(--text-secondary)}
/* Phone: the international input's flag menu (intl-tel-input). */
.vik-cform .gform_wrapper.gravity-theme .iti{display:block;width:100%}
.vik-cform .gform_wrapper.gravity-theme .iti input[type=tel]{padding-left:52px!important}
/* Departments and consent: the design's checkboxes. */
.vik-cform .gform_wrapper.gravity-theme .gfield_checkbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.vik-cform .gform_wrapper.gravity-theme .gchoice,.vik-cform .gform_wrapper.gravity-theme .ginput_container_consent{display:flex;align-items:flex-start;gap:10px}
.vik-cform .gform_wrapper.gravity-theme :is(.gchoice,.ginput_container_consent) input[type=checkbox]{flex:none;width:20px!important;height:20px!important;margin:2px 0 0!important;padding:0!important;accent-color:var(--vik-astrida)}
.vik-cform .gform_wrapper.gravity-theme :is(.gchoice,.ginput_container_consent) label{margin:0!important;font-family:var(--font-body);font-size:16px!important;font-weight:400;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--ink)}
.vik-cform .gform_wrapper.gravity-theme .ginput_container_consent label a{color:var(--ink)}
/* The pages' buttons: "Áfram" and the submit red, "Til baka" outline. */
.vik-cform .gform_wrapper.gravity-theme .gform_page_footer{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0!important;padding:0!important;border:0!important}
.vik-cform .gform_wrapper.gravity-theme :is(.gform_next_button,.gform_button){display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px!important;border:0!important;border-radius:var(--radius-pill)!important;background:var(--action-primary)!important;color:#fff!important;cursor:pointer;font-family:var(--font-condensed)!important;font-weight:700!important;font-size:16px!important;line-height:1.1!important;letter-spacing:.06em;text-transform:uppercase}
.vik-cform .gform_wrapper.gravity-theme :is(.gform_next_button,.gform_button):hover{background:var(--action-primary-hover)!important}
.vik-cform .gform_wrapper.gravity-theme .gform_previous_button{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px!important;border:1px solid var(--black)!important;border-radius:var(--radius-pill)!important;background:var(--white)!important;color:var(--ink)!important;cursor:pointer;font-family:var(--font-condensed)!important;font-weight:700!important;font-size:16px!important;letter-spacing:.06em;text-transform:uppercase}
.vik-cform .gform_wrapper.gravity-theme .gform_ajax_spinner{margin-left:8px;align-self:center}
/* Never shown: the form's Activation Key (Gravity Forms hides it too). */
.vik-cform .gform_wrapper .gfield_visibility_hidden,.vik-cform .gform_wrapper .gfield--type-password.gfield_visibility_hidden{position:absolute!important;left:-9999px!important;visibility:hidden!important}
.vik-cform .gform_confirmation_message a{color:var(--ink)}

/* ── Already a member ── */
.vik-join-strip{border-top:1px solid var(--border-hairline);background:var(--white)}
.vik-join-strip__in{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:32px;padding-bottom:32px}
.vik-join-strip__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(28px,3vw,44px);line-height:.9;text-transform:uppercase}

@media (max-width:1000px){
	.vik-join__grid{grid-template-columns:minmax(0,1fr);gap:40px}
	.vik-join__card{position:static}
}
@media (max-width:640px){
	.vik-join{padding-top:48px}
	.vik-join__card{padding:20px;margin-left:-4px;margin-right:-4px}
	.vik-cform .gform_wrapper.gravity-theme .gfield_checkbox{grid-template-columns:minmax(0,1fr)}
}