/*
 * Företagssidorna: Företag (80145), Transportbilar (80148),
 * Företagsleasing (80150) och Sälja företagsbil (80152).
 * Laddas bara på de sidorna, se includes/foretag.php.
 *
 * Heroerna återanvänder temats section.hero.sub och section.hero.sellcar,
 * kontakt och recensioner temats section.additional_info.
 */

/* Sektioner och avstånd */

.foretag_section > .wrapper {width: 90%; max-width: 1180px; margin: 0 auto; padding: 5em 0;}
.foretag_section--wide > .wrapper {max-width: 1410px;}
.foretag_section--grey {background: #f9f9f9;}

/* Två vita sektioner i rad delar på luften i stället för att dubbla den. */
.foretag_section:not(.foretag_section--grey) + .foretag_section:not(.foretag_section--grey) > .wrapper {padding-top: 0;}

/* Heron på Sälja företagsbil har redan luft under sig. */
.foretag_saljhero + .foretag_section:not(.foretag_section--grey) > .wrapper {padding-top: 0;}

.foretag_heading {max-width: 740px; margin: 0 0 2.5em;}
.foretag_heading p {margin: 0;}

/* Checklista med blå bock */

.foretag_checklist {list-style-type: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4em;}
.foretag_checklist li {position: relative; padding: 0 0 0 1.75em;}
.foretag_checklist li:before {content: ''; position: absolute; left: 0; top: 0.3em; width: 17px; height: 17px; background: url('../img/icons/blue_check.svg') no-repeat center; background-size: 17px;}
.foretag_checklist--inline {flex-direction: row; flex-wrap: wrap; gap: 0.5em 2em; font-family: "Host Grotesk", sans-serif; font-weight: 500;}

/* Hero (Företag) */

section.section.hero.foretag_hero {margin: 3em auto 0;}
section.section.hero.foretag_hero .wrapper .content {bottom: 3em;}
section.section.hero.foretag_hero .wrapper .content p {margin: 0 0 1.5em;}
section.section.hero.foretag_hero .wrapper .hero_overlay {background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%);}
.foretag_buttons {display: flex; flex-wrap: wrap; gap: 0.75em;}
.foretag_buttons .btn {display: inline-block;}
.foretag_buttons .btn:not(.primary) {background: #fff; color: #1e1e1e;}
.foretag_buttons .btn:not(.primary):hover {background: #0171c6; color: #fff;}

/* Sidhuvud (Transportbilar, Företagsleasing): kompakt, så att bilarna kommer högt upp */

section.foretag_intro > .wrapper {padding: 3em 0 2.5em;}
section.foretag_intro h1 {margin: 0 0 0.4em;}
section.foretag_intro .foretag_ingress {max-width: 820px; margin: 0 0 1.25em;}

/* Hero med formulär (Sälja företagsbil) */

section.section.hero.foretag_saljhero .right h2 {margin: 0 0 0.75em;}
section.section.hero.foretag_saljhero .right .foretag_checklist {gap: 0.6em;}
section.section.hero.foretag_saljhero .left > p:first-child {margin-top: 0;}

/* Bilar i lager */

section.foretag_lager .container {display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: 0 0 2em;}
section.foretag_lager .container h2 {margin: 0;}
section.foretag_lager a.btn.more {display: inline-block;}
section.foretag_lager .rwmotor-vehicle-list {padding: 0;}

/* Kort */

.foretag_cards {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em;}
.foretag_cards--2 {grid-template-columns: repeat(2, 1fr);}
.foretag_cards--1 {grid-template-columns: minmax(0, 560px);}
.foretag_card {display: flex; flex-direction: column; background: #fff; box-shadow: 0 0 1em rgba(0, 0, 0, 0.06); color: inherit; text-decoration: none;}
a.foretag_card:hover {box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.12);}
a.foretag_card:hover h3 {text-decoration: underline;}
.foretag_card_image {aspect-ratio: 3/2; overflow: hidden; background: #e8e8e8;}
.foretag_card_image img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
a.foretag_card:hover .foretag_card_image img {transform: scale(1.03);}
.foretag_card_content {display: flex; flex-direction: column; flex: 1; padding: 1.5em;}
.foretag_card_content h3 {margin: 0 0 0.5em;}
.foretag_card_content p {margin: 0 0 1.5em;}
.foretag_card_link {margin-top: auto; color: #0060a8; font-family: "Host Grotesk", sans-serif; font-weight: 600;}

/* Fördelar */

section.foretag_fordelar h2 {margin: 0 0 1.5em;}
.foretag_fordelar_list {list-style-type: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2em;}
.foretag_fordelar_list li {position: relative; padding: 0 0 0 2em;}
.foretag_fordelar_list li:before {content: ''; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; background: url('../img/icons/blue_check.svg') no-repeat center; background-size: 20px;}
.foretag_fordelar_list h3 {font-size: 1.05em; margin: 0 0 0.4em;}
.foretag_fordelar_list p {margin: 0; font-size: 0.95em;}

/* Steg */

.foretag_steg_list {list-style-type: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2em;}
.foretag_steg_list--1 {grid-template-columns: minmax(0, 560px);}
.foretag_steg_list--2 {grid-template-columns: repeat(2, 1fr);}
.foretag_steg_list--4 {grid-template-columns: repeat(4, 1fr);}
.foretag_steg_list li {background: #fff; border: 1px solid #e8e8e8; border-radius: 0.75em; padding: 1.5em;}
.foretag_steg_nr {display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; margin: 0 0 1em; border-radius: 50%; background: #0060a8; color: #fff; font-family: "Host Grotesk", sans-serif; font-weight: 600;}
.foretag_steg_list h3 {margin: 0 0 0.4em;}
.foretag_steg_list p {margin: 0;}

/* Text */

section.foretag_text > .wrapper {display: flex; flex-direction: row; align-items: center; gap: 4em;}
section.foretag_text > .wrapper .col {flex: 1;}
section.foretag_text > .wrapper .col p:last-child {margin-bottom: 0;}

/* Vanliga frågor */

section.foretag_faq > .wrapper {max-width: 800px;}
.foretag_faq_item {border-bottom: 1px solid #e2e2e2;}
.foretag_faq_item summary {display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1em 0; cursor: pointer; list-style: none; font-family: "Host Grotesk", sans-serif; font-weight: 500;}
.foretag_faq_item summary::-webkit-details-marker {display: none;}
.foretag_faq_item[open] .accordion_icon {transform: rotate(45deg);}
.foretag_faq_answer {padding: 0 2em 1em 0;}
.foretag_faq_answer p {margin: 0 0 0.75em;}
.foretag_faq_answer p:last-child {margin: 0;}

/* Kontakt och recensioner */

section.additional_info.foretag_section .wrapper .contact h2 {margin-top: 0;}
section.additional_info.foretag_kontakt .wrapper .contact a:not(.btn) {text-decoration: underline;}
section.additional_info.foretag_kontakt .wrapper .contact .btn {display: inline-block; color: #fff;}

/* Responsivt */

@media screen and (max-width: 991px) {
	section.section.hero.foretag_hero img {aspect-ratio: 4/3;}
	.foretag_cards, .foretag_cards--2 {grid-template-columns: repeat(1, 1fr); gap: 1.5em;}
	.foretag_card {flex-direction: row;}
	.foretag_card_image {flex: 0 0 40%; aspect-ratio: auto;}
	.foretag_fordelar_list, .foretag_steg_list--4 {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 768px) {
	section.section.hero.foretag_hero {margin: 1em auto 0;}
	section.section.hero.foretag_hero img {aspect-ratio: 16/9;}
	section.section.hero.foretag_hero .wrapper .content p {margin: 0 0 1em;}
	.foretag_buttons .btn:not(.primary) {background: #f4f4f4;}

	.foretag_section > .wrapper {padding: 3em 0;}
	section.foretag_intro > .wrapper {padding: 2em 0 1.5em;}
	.foretag_checklist--inline {flex-direction: column; gap: 0.3em;}

	.foretag_card {flex-direction: column;}
	.foretag_card_image {flex: none; aspect-ratio: 3/2;}
	.foretag_steg_list, .foretag_steg_list--2 {grid-template-columns: repeat(1, 1fr); gap: 1em;}
	section.foretag_lager .container {flex-direction: column; align-items: flex-start;}
	section.foretag_text > .wrapper {flex-direction: column; gap: 2em;}
}

@media screen and (max-width: 560px) {
	.foretag_fordelar_list, .foretag_steg_list--4 {grid-template-columns: repeat(1, 1fr); gap: 1.5em;}
}