/* TechDaddy content components.
   Short-form card layouts used across the service and service-area pages in
   place of stacked heading-and-paragraph text. Every component reuses the
   existing palette variables declared in style.css. */

/* ---------- Fact card ---------- */
/* Icon, one heading, one or two short sentences, optional uppercase tag. */
.td-fact{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.td-fact:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-fact-icon{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    flex: 0 0 auto;
}
.td-fact-icon.alt{ background: var(--secondary-color); }
.td-fact-icon.deep{ background: #064e4e; }
.td-fact h3{
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.55rem;
}
.td-fact p{
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}
.td-fact p a{
    color: var(--primary-color);
    font-weight: 600;
}
.td-fact-tag{
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--primary-color);
}

/* ---------- Spec card ---------- */
/* Compact fact pairs such as turnaround, warranty, and pricing. */
.td-spec{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.td-spec:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-spec i{
    display: block;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.75rem;
}
.td-spec h3{
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 0.45rem;
}
.td-spec p{
    color: var(--text-color);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}
.td-spec p a{ color: var(--primary-color); }

/* ---------- Question card ---------- */
/* Visible question and answer text, worded identically to the FAQPage schema. */
.td-qa{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1.5rem 1.4rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: box-shadow 0.3s ease;
    height: 100%;
}
.td-qa:hover{
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-qa h3{
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.td-qa h3 i{
    color: var(--primary-color);
    margin-right: 0.5rem;
}
.td-qa p{
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}
.td-qa p a{ color: var(--primary-color); font-weight: 600; }

/* ---------- Icon service card ---------- */
/* Related-service tiles. Replaces photograph cards so every tile is uniform. */
.td-ico-card{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.td-ico-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-ico-card-icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.75rem;
}
.td-ico-card-icon.alt{ background: var(--secondary-color); }
.td-ico-card-icon.deep{ background: #064e4e; }
.td-ico-card h3,
.td-ico-card h4{
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}
.td-ico-card p{
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.td-ico-card .main-btn{
    margin-top: auto;
    align-self: center;
}

/* ---------- Per-card call to action ---------- */
/* Sits at the foot of a diagnostics card and links straight to the matching
   quote category or service page. */
.diag-card{
    display: flex;
    flex-direction: column;
}
.diag-cta{
    display: inline-block;
    margin-top: auto;
    align-self: center;
    padding: 0.55rem 1.4rem;
    background: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 0.3125rem;
    color: var(--white-color);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .3s ease-out 0s;
}
.diag-card .diag-desc + .diag-cta,
.diag-card .diag-note + .diag-cta{
    margin-top: 1.25rem;
}
.diag-cta:hover{
    background: transparent;
    color: var(--primary-color) !important;
}

/* ---------- Section lede ---------- */
/* One or two sentences under a section heading. Capped width so a line never
   runs the full container. */
.td-lede{
    max-width: 44rem;
    margin: 0 auto 0.5rem;
    color: var(--text-color);
}

/* ---------- Pill link row ---------- */
/* Cross-page navigation at the foot of a section. */
.td-linkrow{
    text-align: center;
    padding-top: 1.25rem;
}
.td-linkrow a{
    display: inline-block;
    margin: 0.3rem 0.3rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid rgba(0,128,128,0.35);
    border-radius: 2rem;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-out;
}
.td-linkrow a:hover{
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white-color) !important;
}

/* ---------- Checklist card ---------- */
/* Short "do this first" items where each line is one instruction. */
.td-check{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1.6rem 1.5rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.td-check:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-check h3{
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.5rem;
}
.td-check h3 i{
    color: var(--primary-color);
    margin-right: 0.55rem;
}
.td-check p{
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Numbered step card ---------- */
.td-step{
    background: var(--white-color);
    border-radius: 1rem;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}
.td-step:hover{
    transform: translateY(-6px);
    box-shadow: 0 8px 32px rgba(0,128,128,0.15);
}
.td-step-num{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.0625rem;
    font-weight: 700;
    margin-bottom: 0.9rem;
}
.td-step h3{
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.45rem;
}
.td-step p{
    color: var(--text-color);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ---------- Section heading spacing ---------- */
.td-sec-head{
    text-align: center;
    padding-bottom: 0.5rem;
}
.td-sec-head h2{
    margin-bottom: 0.6rem;
}

@media (max-width: 767px){
    .td-fact,
    .td-check,
    .td-step{ padding: 1.4rem 1.25rem; }
    .td-ico-card{ padding: 1.75rem 1.25rem 1.5rem; }
}