@charset "utf-8";

/*==================================================
O CANIL
==================================================*/

#o-canil{margin-block-end:3rem;}

/*==================================================
HISTÓRIA
==================================================*/

#kennel-history{align-items: start; display:grid; gap:32px;}
.history-content span{color:var(--orange);}
.history-content p{line-height:1.8;}
.history-photo{margin:0;}
.history-photo picture{display:block;}
.history-photo img{display:block; block-size:auto; border-radius:var(--radius); box-shadow:var(--shadow);}

/*==================================================
LINHA DO TEMPO
==================================================*/

.history-timeline{display:grid; gap:30px; padding-inline-start:24px; border-inline-start:3px solid var(--lime);}
.history-timeline article{position:relative;}
.history-timeline article::before{content:""; position:absolute; inset-inline-start:-32px; inset-block-start:6px; inline-size:14px; block-size:14px; border-radius:50%; background:var(--orange);}
.year{display:block; margin-block-end:6px; color:var(--orange); font-size:13px; font-weight:700; text-transform:uppercase;}
.history-timeline h3{margin-block:0 8px; font-size:18px;}
.history-timeline p{margin:0; color:var(--ink-muted); font-size:14px; line-height:1.7;}

/*==================================================
DIFERENCIAIS
==================================================*/

#kennel-differentials{margin-block:60px;}
.section-heading{max-inline-size:640px; margin-inline:auto; margin-block-end:42px; text-align:center;}
.section-description{color:var(--ink-muted); line-height:1.8;}
.differentials-panel{display:grid; grid-template-columns:1fr; gap: 22px;}
.differential-card{display:grid; grid-template-columns:63px 1fr; align-items: start; gap:14px; max-inline-size:285px;}
.differential-card img{inline-size:auto; margin-inline:auto;}
.differential-card h3{font-size:13px; font-weight:700; text-transform:uppercase;}
.differential-card p{font-size:13px; line-height:1.7;}

/*==================================================
DEPOIMENTOS
==================================================*/

#testimonials{margin-block:60px;}
.testimonial-grid{display:grid; grid-template-columns:1fr; gap:22px;}
.testimonial-card{position:relative; padding:28px; border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow);}
.testimonial-card::before{content:"“"; position:absolute; inset-inline-end:18px; inset-block-start:12px; color:rgba(245,122,0,.12); font-family:Georgia,serif; font-size:82px; line-height:1;}
.testimonial-card p{margin-block-end:24px; color:var(--ink-muted); line-height:1.8;}
.testimonial-card strong{display:block; font-size:15px;}
.testimonial-card span{display:block; margin-block-start:4px; color:#777; font-size:12px;}

/*==================================================
EQUIPE
==================================================*/

#team{margin-block:60px;}
.team-grid{display:grid; grid-template-columns:1fr; gap:22px;}
.team-card{overflow:hidden; border-radius:var(--radius); background:var(--white); box-shadow:var(--shadow); transition:transform var(--transition);}
.team-card:hover{transform:translateY(-4px);}
.team-card img{display:block; inline-size:100%;}
.team-card h3{margin:22px 22px 10px; font-size:18px;}
.team-card p{margin:0 22px 22px; color:var(--ink-muted); font-size:14px; line-height:1.7;}

/*==================================================
CTA
==================================================*/

#kennel-cta{margin-block:60px;}
.cta-box{padding:36px 24px; border-radius:var(--radius); background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:var(--white); text-align:center;}
.cta-box .eyebrow{color:var(--lime-light);}
.cta-box h2{margin-block:12px 18px;}
.cta-box p{max-inline-size:560px; margin-inline:auto; line-height:1.8;}
.cta-box .actions{justify-content:center; margin-block-start:28px;}
.cta-box .btn-outline{border:0; background:var(--white); color:var(--orange);}


/*==================================================
768px
==================================================*/
@media only screen and (min-width:768px){
    #kennel-history{grid-template-columns: 250px repeat(2, 1fr); align-items: center;}
    .history-photo{order: 0;}
    .differentials-panel{grid-template-columns: repeat(2, 1fr); padding: 0 36px;}
    .testimonial-grid{grid-template-columns:repeat(2,1fr);}
    .team-grid{grid-template-columns:repeat(2,1fr);}
}

/*==================================================
820px
==================================================*/
@media only screen and (min-width:820px){
    
}

/*==================================================
1024px
==================================================*/
@media only screen and (min-width:1024px){
    #kennel-history{grid-template-columns: 314px repeat(2, 1fr); align-items: center;}
    .differentials-panel{grid-template-columns: repeat(3, 1fr);}
}

/*==================================================
1180px
==================================================*/

@media only screen and (min-width:1180px){
    #kennel-history{gap: 48px;}
    .differentials-panel {padding: 0 112px;}
    .testimonial-grid{grid-template-columns: repeat(4, 1fr); margin-block-start: -16px; padding: 22px;}
    .team-grid{grid-template-columns:repeat(4, 1fr);}
    .cta-box{padding: 70px;}
}

/*==================================================
1280px
==================================================*/

@media only screen and (min-width:1280px){
    #kennel-history{grid-template-columns: 440px repeat(2, 1fr);}
    .testimonial-grid{grid-template-columns: 466px repeat(2, 1fr);}
}

/*==================================================
1366px
==================================================*/

@media only screen and (min-width:1366px){
    .testimonial-grid{gap: 28px;}
    .team-grid{gap: 28px;}
}